Question

如何在侦听同一输入字段时区分哪个验证器失败？假设我有一个简单的输入字段和两个附加到该字段的自定义验证器： 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 设置为输入字段，但由于第一个或第二个验证器，我不知道它是否已设置。

Answer 1

您可以使用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']

Answer 2

感谢来自回调的提示，我设法让它发挥作用。如上所述，您需要从自定义验证器返回key：value，例如

return { myValidator1 : true };

然后你可以像这样从html中获取它：

<span *ngIf="nameCtrl.errors['myValidator1']">Validator 1 failed</span>

Angular 2中一个字段的多个自定义验证器

2 个答案: