templates - 如何在基于模型和模板的 Controller 中使用相同的验证器

Question

我的模型驱动表单中有一个自定义验证器来进行验证。

模板 -

<form [formGroup] = "myForm" (ngSubmit) = "save(myForm.value)">

            <div>
                <label>Name</label>
                <input type="text" formControlName="name">
            </div>
             <p *ngIf="myForm.controls.name?.errors">This has to be rahulsingh!</p>
             <button type = "submit" > Submit</button>
        </form>

组件 -

this.myForm = this.fb.group({
            name: ['', [this.validateName]]          
        });


validateName(c: FormControl) {
    return (c.value === 'rahulSingh') ? null : {
        notCorrect: true
    };
}

这适用于模型驱动表单

但是如何对模板驱动使用相同的验证功能

我正在关注此链接 http://blog.thoughtram.io/angular/2016/03/21/template-driven-forms-in-angular-2.html

但我无法理解如何使这个函数对于两种形式都是全局的并将其用作指令。为了实现这一目标，我总是会遇到一个奇怪的错误。

当我尝试做时，我的模板中还有一件奇怪的事情

<p *ngIf="myForm.hasErrors('notCorrect')">This has to be rahulsingh!</p>

我得到无法读取未定义的属性“hasError”。

Answer 1

首先，我们将构建适用于模板驱动表单的指令，该指令将自动使其适用于响应式(Reactive)表单(巧妙的技巧):

import { Directive, Input } from '@angular/core';
import { FormControl, NG_VALIDATORS, Validator } from '@angular/forms';

@Directive({
  selector: '[requiredName][ngModel]',
  providers: [{provide: NG_VALIDATORS, useExisting: SpecificNameValidatorDirective, multi: true}]
})
export class SpecificNameValidatorDirective implements Validator {
  private valFn = (c: FormControl, name: string) {
    return (c.value === name) ? null : {
        notCorrect: true
    };
  }

  @Input('requiredName') name: string = "temp";

  constructor() {
  }

  validate(control: AbstractControl): {[key: string]: any} {
    console.log("validation station", this.name, control.value);
    return this.valFn(control, this.name);
  }
}

这里有一个问题，即名称没有硬编码，尽管提供了默认值，这意味着我们可以以模板驱动的形式使用该指令，如下所示:

<form #myForm="ngForm" (ngSubmit)="save(myForm.value)">
    <div>
        <label>Name</label>
        <input requiredName="rahulSingh" name="name" ngModel #name="ngModel" type="text" id="name">
    </div>
     <p *ngIf="name.errors?.notCorrect">This has to be rahulSingh!</p>
     <button type="submit"> Submit</button>
</form>

对于模板驱动的表单来说足够简单。

对于 react 形式，我们可以实例化指令的实例:

var validator = new SpecificNameValidatorDirective();

并设置我们想要的名称

validator.name = "nobdy";

然后用我们的指令实例构建我们的表单:

this.myForm = this.fb.group({
          name: ['',[validator]]
      });

这将自动查找 validate 函数并执行它，因为各种验证器都遵循 Validator interface definition 。 janky 部分是将名称设置在单独的行中，而不是在构造函数中，但我无法使其与模板驱动版本配合良好。

无论如何，有一个 Plunker可供您随意使用。