Введение в Angular 2 Forms — Шаблонно-управляемые формы по сравнению с модельно-ориентированными

Не так много, чтобы увидеть здесь! У нас есть только объявление для объекта модели представления  vmи используемый обработчик событий  ng-submit.

Все очень полезные функции отслеживания ошибок формы и регистрации валидаторов позаботятся о нас, просто включив их  FORM_DIRECTIVES в наш список директив!

Как Angular тянет это?

Это работает так, что при  FORM_DIRECTIVES применении к представлению Angular автоматически применяет  ControlGroup директиву к элементу формы прозрачным способом.

Если по какой-то причине вы этого не хотите, вы всегда можете отключить эту функцию, добавив ее  ng-no-form в качестве атрибута формы.

Кроме того, к каждому  ng-control также будет применена директива, которая будет регистрироваться в контрольной группе, и валидаторы будут зарегистрированы, если такие элементы как  required или  maxlength применяются к  ng-control.

Присутствие  [(ng-model)] также зарегистрирует директиву, которая подключит двунаправленную привязку между формой и моделью представления, и, в конце концов, на уровне контроллера больше ничего не нужно делать.

Вот почему это называется шаблонно-управляемыми формами, потому что вся логика проверки объявлена ​​в шаблоне. Это почти идентично тому, как это делается в Angular 1.

Преимущества и недостатки шаблонно-управляемых форм

В этом простом примере мы на самом деле не можем его увидеть, но сохранение шаблона в качестве источника всей истины проверки формы — это то, что может стать довольно волосатым довольно быстро.

По мере того, как мы добавляем все больше и больше тегов валидаторов в поле или когда мы начинаем добавлять сложные валидации между полями, читаемость формы снижается до такой степени, что ее будет сложнее передать ее веб-дизайнеру.

Преимуществом этого способа обработки форм является его простота, и его, вероятно, более чем достаточно для создания очень большого диапазона форм.

С другой стороны, логика проверки формы не может быть проверена модулем. Единственный способ проверить эту логику — это запустить сквозное тестирование с помощью браузера, например, с использованием безголового браузера  PhantomJs.

Шаблонно-ориентированные формы с точки зрения функционального программирования

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

Each form has a state that can be updated by many different interactions and its up to the application developer to manage that state and prevent it from getting corrupted. This can get hard to do for very large forms and can introduce a whole category of potential bugs.

Inspired by what was going on in the React world, the Angular 2 team added a different alternative for managing forms, so let’s go through it.

Model Driven Forms

A model driven form looks on the surface pretty much like a template driven form. Let’s take our previous example and re-write it:

<section class="sample-app-content">
    <h1>Model-based Form Example:</h1>
    <form [ng-form-model]="form" (ng-submit)="onSubmit()">
        <p>
            <label>First Name:</label>
            <input type="text" ng-control="firstName">
        </p>
        <p>
            <label>Password:</label>
            <input type="password" ng-control="password">
        </p>
        <p>
            <button type="submit" [disabled]="!form.valid">Submit</button>
        </p>
    </form>
</section>

@Component({
    selector: "model-driven-form"
})
@View({
    templateUrl: 'model-driven-form.html',
    directives: [FORM_DIRECTIVES]
})
export class ModelDrivenForm {
    form: ControlGroup;
    firstName: Control = new Control("", Validators.required);
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            "firstName": this.firstName,
            "password":["", Validators.required]
        });
    }
    onSubmitModelBased() {
        console.log("model-based form submitted");
        console.log(this.form);
    }
}

this.form.valueChanges.toRx()
   .map((value) => {
     value.firstName = value.firstName.toUpperCase();
        return value;
   })
   .filter((value) => this.form.valid)
   .subscribe((value) => {
       alert("View Model = " + JSON.stringify(value));
   });