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

【问题标题】：Multiple custom validators for one field in Angular 2Angular 2中一个字段的多个自定义验证器
【发布时间】：2018-06-01 21:41:49
【问题描述】：

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

【问题讨论】：

标签： angular angular-forms

【解决方案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']

【讨论】：

实际上听起来不错，但我收到了错误消息。当我编写 nameCtrl.errors.myValidator1 时，编译器取消了它并给我一个错误 'myValidator1' is not defined '__type' does not contain such a member.
你可以简单地使用方括号而不是点符号:)

【解决方案2】：

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

return { myValidator1 : true };

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

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

【讨论】：