我需要根据其他字段的值来确定某些表单字段是否必填。内置 RequiredValidator指令似乎不支持这一点,所以我创建了自己的指令:
@Directive({
selector: '[myRequired][ngControl]',
providers: [new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MyRequiredValidator), multi: true })]
})
class MyRequiredValidator {
@Input('myRequired') required: boolean;
validate(control: AbstractControl): { [key: string]: any } {
return this.required && !control.value
? { myRequired: true }
: null;
}
}
示例用法:
<form>
<p><label><input type="checkbox" [(ngModel)]="isNameRequired"> Is Name Required?</label></p>
<p><label>Name: <input type="text" [myRequired]="isNameRequired" #nameControl="ngForm" ngControl="name" [(ngModel)]="name"></label></p>
<p *ngIf="nameControl.control?.hasError('myRequired')">This field is required.</p>
</form>
如果用户首先切换复选框,然后在文本框中键入或删除文本,则此方法工作正常。但是,如果用户在文本框为空时切换复选框,则验证消息不会正确更新。
如何修改 MyRequiredValidator
以在其 required
属性更改时触发验证?
注意:我正在寻找一种只涉及更改 MyRequiredValidator
的解决方案。我想避免向 App 组件添加任何逻辑。
最佳答案
我会使用类似的东西:
@Directive({
selector: '[myRequired][ngControl]',
providers: [new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MyRequiredValidator), multi: true })]
})
class MyRequiredValidator {
@Input('myRequired') required: boolean;
ngOnChanges() {
// Called when required is updated
if (this.control) {
this.control.updateValueAndValidity();
}
}
validate(control: AbstractControl): { [key: string]: any } {
this.control = control;
return this.required && !control.value
? { myRequired: true }
: null;
}
}
查看此插件:https://plnkr.co/edit/14jDdUj1rdzAaLEBaB9G?p=preview .
关于validation - Angular 2 中的条件必需验证器指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36986375/