> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/angular-form.md).

# Angular Form

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

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

{% code title="app.module.ts" overflow="wrap" lineNumbers="true" %}

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

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

```

{% endcode %}

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

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

Приклад:

{% tabs %}
{% tab title="app.component.html" %}
{% code overflow="wrap" lineNumbers="true" %}

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

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

{% endcode %}
{% endtab %}

{% tab title="app.component.ts" %}
{% code overflow="wrap" lineNumbers="true" %}

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

```

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

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

### ngModelChange

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

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

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

{% endcode %}