首页 文章

Angular 2 中的模板驱动表单

提问于
浏览
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 的模型驱动表单中使用。如何使用模板驱动方法完成此操作?

答案如“不可能也不会在未来”。或者“这不是最佳实践,请采用模型驱动方法。”连同一个论点对我来说都不错。 (我已经假设没有办法,但在网上找不到任何证据,我更喜欢模型驱动的方法 more.)

2 回答

  • 2

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

    您应该阅读本文,了解如何为自定义验证器创建指令:http://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

  • 0

    在 Template from froms 中,您必须为自定义验证器创建指令并将其用于模板元素。

    这是我的指令文件,

    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;
        }
    }
    

相关问题