代码之家 › 专栏 › 技术社区 › Martin Äuka

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

angular-forms angular

Martin Äuka · 技术社区 · 6 年前

当它们侦听同一个输入字段时,如何区分哪个验证器失败? 假设我有一个简单的输入字段和两个附加到该字段的自定义验证器: 我的验证器1 和 我的验证器2

<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无效 输入字段,但我不知道是因为第一个还是第二个验证器而设置的。

2 回复 | 直到 6 年前

callback 6 年前

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

Martin Äuka 6 年前

多亏回拨的提示,我才设法使它工作。如前所述,您需要从自定义验证器返回key:value。

return { myValidator1 : true };

然后您可以从HTML访问它,如下所示:

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