Html Angular 2中的模板驱动表单

查看Angular 2（beta.0）中模板驱动表单与模型驱动表单的优缺点，我想知道如何使用模板驱动表单将自定义验证附加到简单的文本输入字段。这种方法没有可用的示例（除了必需的示例），或者我没有找到它们

<form #f="ngForm">
  <label for="name">Name</label>
  <input type="text" ngControl="name" [(ngModel)]="obj.name" #name="ngForm">
  <button type="button" (click)="save()">Save</button>
</form>

上述验证功能在使用FormBuilder的模型驱动表单中使用。如何使用模板驱动的方法实现这一点

---

像“这不可能，将来也不会。”或“这不是最佳实践，采用模型驱动的方法。”这样的回答，再加上一个论点，对我来说是再合适不过了。（我已经假设没有办法，但在web上找不到证据，我更喜欢模型驱动的方法。）

在模板驱动的表单中，您需要为自定义验证器创建一个指令，并将其附加到输入元素（如html属性）中（与附加

required

属性的方式相同）

---

您应该阅读这篇关于如何为自定义验证器创建指令的文章：

在模板驱动的From中，您必须为自定义验证器创建指令并将其用于模板元素

这是我的指令文件

validator.directive.ts

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
    selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
    ]
})
export class EqualValidator implements Validator {
    constructor( @Attribute('validateEqual') public validateEqual: string,
        @Attribute('reverse') public reverse: string) {

    }

    private get isReverse() {
        if (!this.reverse) return false;
        return this.reverse === 'true' ? true: false;
    }

    validate(c: AbstractControl): { [key: string]: any } {
        // self value
        let v = c.value;

        // control vlaue
        let e = c.root.get(this.validateEqual);

        // value not equal
        if (e && v !== e.value && !this.isReverse) {
          return {
            validateEqual: false
          }
        }

        // value equal and reverse
        if (e && v === e.value && this.isReverse) {
            delete e.errors['validateEqual'];
            if (!Object.keys(e.errors).length) e.setErrors(null);
        }

        // value not equal and reverse
        if (e && v !== e.value && this.isReverse) {
            e.setErrors({
                validateEqual: false
            })
        }

        return null;
    }
}

---

模板驱动的表单非常容易使用。但随着应用程序大小的增加，处理所有验证变得越来越复杂。顾名思义，模板驱动表单的所有代码，它的验证主要在html模板上完成，所以模板代码会增加。如果是React表单/模型驱动，则只需在typescript中配置控制字段。这两种方法都很好，并且都有各自的优点，因此根据需要，我们应该从另一种方法中选择一种。

看看这是否有帮助：看看这里。。。不幸的是，只有使用FormBuilder的示例。我想知道当我要隐式定义

ngControl=“name”

时是否可以附加验证器？

import { Directive, forwardRef, Attribute } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
    selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }
    ]
})
export class EqualValidator implements Validator {
    constructor( @Attribute('validateEqual') public validateEqual: string,
        @Attribute('reverse') public reverse: string) {

    }

    private get isReverse() {
        if (!this.reverse) return false;
        return this.reverse === 'true' ? true: false;
    }

    validate(c: AbstractControl): { [key: string]: any } {
        // self value
        let v = c.value;

        // control vlaue
        let e = c.root.get(this.validateEqual);

        // value not equal
        if (e && v !== e.value && !this.isReverse) {
          return {
            validateEqual: false
          }
        }

        // value equal and reverse
        if (e && v === e.value && this.isReverse) {
            delete e.errors['validateEqual'];
            if (!Object.keys(e.errors).length) e.setErrors(null);
        }

        // value not equal and reverse
        if (e && v !== e.value && this.isReverse) {
            e.setErrors({
                validateEqual: false
            })
        }

        return null;
    }
}