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

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) { }
}

我的问题是我应该 return 什么才能知道验证 1 失败还是验证 2 失败？据我所知，这些验证将 ng-invalid 设置为输入字段，但我不知道它是由于第一个还是第二个验证器而设置的。

Answer 1

您可以使用 field.errors.myValidator1 和 field.errors.myValidator2

但是在你的指令中你必须 return 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

感谢回调的提示，我设法让它工作了。如前所述，您需要 return key : value 来自您的自定义验证器，例如

return { myValidator1 : true };

然后您可以像这样从 html 访问它：

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

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

Multiple custom validators for one field in Angular 2

angular

angular-forms