6

查看 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>

作为示例验证功能：

validate(control:Control):ValidationResult {
   if (control.value === 'Monkey') {
      return { invalidName: true }
   }
}

上述验证功能在使用 FormBuilder 的模型驱动表单中工作。使用模板驱动方法如何做到这一点？

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

4

3 回答 3

2

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

您应该阅读这篇关于如何为自定义验证器创建指令的文章：http: //blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

于 2016-07-09T15:34:44.043 回答
0

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

这是我的指令文件，

验证器.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;
    }
}
于 2018-04-11T13:14:06.897 回答
0

模板驱动的表单非常易于使用。但是随着应用程序大小的增加，处理所有验证变得复杂。顾名思义-模板驱动表单的所有代码，其验证主要在 html 模板上完成，因此您的模板代码会增加。而在 React Forms/Model 驱动的情况下，您只需要在 typescript 中配置您的控制字段。所以两者都很好并且有自己的优势，所以根据要求，应该从另一种方法中选择一种。

于 2019-11-05T10:53:50.680 回答