Формы на основе шаблонов в 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>

В качестве примера функции проверки:

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

Вышеупомянутая функция проверки работает с использованием формы, управляемой моделью, с использованием FormBuilder. Как это можно сделать, используя подход, основанный на шаблонах?

Ответ типа «Это невозможно и не будет в будущем». или «Это не лучшая практика, используйте подход, основанный на модели». вместе с аргументом меня будет более чем устраивать. (Я уже предполагаю, что нет другого способа найти доказательства в сети, и я больше предпочитаю подход, основанный на моделях.)


typescript angular validation html angular2-forms
person Thomas Zuberbuehler    schedule 20.01.2016    source источник
comment
Посмотрите, поможет ли это: blog.ng- book.com/the-ultimate-guide-to-forms-in-angular-2   -  person Langley    schedule 20.01.2016
comment
посмотрите здесь ... stackoverflow.com/q/34350049/5043867   -  person Pardeep Jain    schedule 20.01.2016
comment
К сожалению, есть только примеры использования FormBuilder. Мне интересно, могу ли я прикрепить валидатор, когда я собираюсь неявно определять ngControl="name"?   -  person Thomas Zuberbuehler    schedule 21.01.2016

Ответы (3)


arrow_upward
2
arrow_downward

В формах, управляемых шаблоном, вам необходимо создать директиву для настраиваемого валидатора и добавить ее к элементу ввода, например атрибуту html (так же, как вы добавляете атрибут required).

Вам следует прочитать эту статью о том, как создавать директивы для пользовательских валидаторов: http://blog.oughttram.io/angular/2016/03/14/custom-validators-in-angular-2.html

person Olegas Gončarovas    schedule 09.07.2016

arrow_upward
0
arrow_downward

В шаблоне, управляемом от, вы должны создать директиву для настраиваемого валидатора и использовать ее для элементов шаблона.

вот мой файл директив,

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;
    }
}
person Savan2396    schedule 11.04.2018

arrow_upward
0
arrow_downward

Формы на основе шаблонов довольно просты в использовании. Но по мере увеличения размера вашего приложения становится сложно обрабатывать все проверки. Как следует из названия, весь код для формы управляется шаблоном, и его проверка выполняется в основном на шаблоне html, поэтому ваш код шаблона увеличивается. В то время как в случае React Forms / Model, вам нужно настроить поля управления только в машинописном тексте. Так что оба хороши и имеют свои преимущества, поэтому в зависимости от требований следует выбирать один из других подходов.

person Anurag Soni    schedule 05.11.2019