如何解决仅在可见输入时激活角度验证器
我正在尝试使其工作,但我不知道如何,我有几个输入仅在用户需要它们时才显示,但是如果它们被激活,则必须填充它们。所以我得到了
component.ts
dataForm = new FormControl({
myInput: new FormControl(null,Validators.required)
})
component.html
<form [formGroup]="dataForm">
<input formControlName="myInput" type="number" *ngIf="inputActive">
<button type="submit" [disabled]="!dataForm.valid">
</form>
我遇到的问题是,当inputActive变量为false且未显示输入时,由于该字段为空,因此该按钮仍处于禁用状态
我希望当输入不显示时,不执行其验证程序,以便启用按钮
有人可以帮助我实现这一目标吗?
解决方法
您需要做的是禁用控件,而不是删除/隐藏表单字段,或者除此以外。这是通过在控件上调用disable()
来完成的。我们将其与相关的disabled
属性一起使用,以达到预期的效果。
@Component({
// ...boilerplate
})
export class MyComponent {
constructor(readonly formBuilder: FormBuilder) {}
dataForm = this.formBuilder.group({
anotherInput: this.formBuilder.control(''),// see note
myInput: this.formBuilder.control(null,Validators.required)
});
disableControl(control: AbstractControl) {
control.disable();
}
}
在模板中
<form [formGroup]="dataForm">
<input formControlName="myInput" type="number"
[hidden]="dataForm.controls.myInput.disabled">
<input formControlName="anotherInput">
<button type="submit" [disabled]="!dataForm.valid">Submit</button>
</form>
<button (click)="disableControl(dataForm.controls.myInput)" type="button"></button>
这还有助于组织表格,因为我们没有inputActive
属性来与表格状态分开维护。
请注意,如果所有的所有子组都被禁用,则整个表单组将被视为已禁用。
,我最近不得不自己处理这个问题。我最终创建了这样的自定义验证器功能
conditionalRequiredValidator(formControl: AbstractControl) {
if (!formControl.parent) {
return null;
}
if (inputActive) {
return Validators.required(formControl);
}
return null;
}
然后在创建FormControl时将此功能作为验证器。
最后,您必须为具有inputActive
值的表单控件以及当其valueChanges
调用内置的updateValueAndValidity
函数时设置一个侦听器。
查看更多here
,您正在等待指令的行为类似于组件。 input
是未在DOM中设置的指令。就是这样但是,当您加载component
时,您将加载所有逻辑。
因此,我建议您将input
放在类似app-input
的组件中,而不要设置所需的Tha验证器,只要显示此组件,验证器就会自动激活。>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。