Angular Form

Модуль FormsModel і директива NgModel

В Angular перш ніж використовувати форми в компонентах, нам потрібно імпортувати в головному модулі AppModule модуль FormsModule, який дозволяє працювати з формами.

app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [ FormsModule, //... ]
  //...
})
//...

При роботі з формами, ключовим моментом є використання директиви NgModel.

Ця директива, за допомогою переданої їй моделі, створює об'єкт FormControl і прив'язує цю модель до створеного елементу форми. Об'єкт FormControl відстежує значення моделі, а також відповідає за валідацію цього значення і взаємодію з користувачем.

app.component.html

<input name="title" [ngModel]="title" />

Якщо нам потрібно відслідковувати зміну введених даних, то ми можемо використовувати двосторонню прив'язку.

app.component.html

<input name="title" [(ngModel)]="title" />

Двостороння прив'язка, це коли елемент DOM прив'язаний до значення на компоненті, при цьому зміни на одному кінці прив'язки відразу приводять до змін на іншому кінці.

Приклад:

app.component.html

<p>Привіт {{ name }}</p>

<input type="text" [(ngModel)]="name" />
<input type="text" [(ngModel)]="name" />

app.component.ts

// ...
export class AppComponent {
    name = 'User';
}

Крім створення прив'язки, директива ngModel дозволяє встановлювати об'єкт ngModel, який буде пов'язаний з певним елементом введення.

app.component.html

<input name="userName" [(ngModel)]="user.name" #userName="ngModel" />

Також з допомогою структури #someName ми можемо отримати доступ до DOM елемента.

ngModelChange

Якщо нам потрібно динамічно при введенні кожного нового символу обробляти введення, то для цього використовують обробника події ngModelChange. Ця подія не співвідноситься ні з якими стандартними подіями елемента html. Функціональність ngModelChange приноситься в елемент через застосування до нього директиви NgModel.

app.component.html

<input
  #userName="ngModel"
  name="name"
  [(ngModel)]="name"
  (ngModelChange)="onNameChange()"
/>