Angular 2中一个字段的多个自定义验证器
Angular 2中一个字段的多个自定义验证器
提问于 2018-05-31 18:55:02
当验证器监听相同的输入字段时，我如何区分哪个验证器失败？假设我有一个简单输入字段和两个附加到该字段的自定义验证器：myValidator1和myValidator2
<div class="form-group">
<label for="name">Character Name</label>
<input type="text" id="name" name="name"
ngModel required myValidator1="name" myValidator2="name"
#nameCtrl="ngModel">
<span class="help-lock" *ngIf="nameCtrl.invalid && nameCtrl.touched">Please enter a name!</span>
<small [hidden]="nameCtrl.valid">
Some error occur
</small>
</div>我实现了这两个验证器，如下所示：
@Directive({
selector: '[myValidator1]',
providers: [{provide: NG_VALIDATORS, useExisting: DuplicateCharValidatorDirective, multi: true}]
})
export class Validator1 implements Validator {
validate(control: AbstractControl): { [key: string]: any; } {
if (this.swService.someValidation(control.value) !== -1) {
return { myValidator1 : false };
}
return null;
}
constructor(private swService: StarWarsService, @Attribute('myValidator1') public myValidator1 : string) { }
}第二个验证器：
@Directive({
selector: '[myValidator2]',
providers: [{provide: NG_VALIDATORS, useExisting: DuplicateCharValidatorDirective, multi: true}]
})
export class SomeOtherValidation implements Validator {
validate(control: AbstractControl): { [key: string]: any; } {
if (this.swService.validateSomethingDifferent(control.value) !== -1) {
return { myValidator2 : false };
}
return null;
}
constructor(private swService: StarWarsService, @Attribute('myValidator2') public myValidator2 : string) { }
}我的问题是，为了知道validation1或validation2是否失败，我应该返回什么？据我所知，这些验证将ng-invalid设置为输入字段，但我不知道它是由于第一个验证器还是第二个验证器而设置的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-05-31 19:17:17
您可以使用field.errors.myValidator1和field.errors.myValidator2
但在您的指令中，必须将true返回为
return { myValidator1 : true };然后使用：
<span *ngIf="nameCtrl.errors.myValidator1">Validator 1 failed</span>
<span *ngIf="nameCtrl.errors.myValidator2">Validator 2 failed</span>编辑：
如果编译器抱怨没有定义errors.myValidator1，那么可以使用方括号来访问该成员，比如：nameCtrl.errors['myValidator1']
Stack Overflow用户
发布于 2018-06-01 01:59:04
多亏了回调的提示，我设法让它工作了。如前所述，您需要从自定义验证器返回key : value，例如
return { myValidator1 : true };然后，您可以像这样从html访问它：
<span *ngIf="nameCtrl.errors['myValidator1']">Validator 1 failed</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50622657
复制相关文章
相似问题