Формы на основе шаблонов

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

Что такое формы на основе шаблонов

Формы на основе шаблонов используют шаблоны HTML и директивы Angular для удобного создания, проверки и отправки форм.

Импорт FormsModule

Чтобы использовать формы на основе шаблонов, импортируйте FormsModule в модуль Angular:

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

Создание простой формы

Определите простую форму в шаблоне с помощью директивы ngForm:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

Двусторонняя привязка с помощью ngModel

ngModel связывает элементы управления формы со свойствами компонента с помощью двусторонней привязки данных:

<input [(ngModel)]="user.name" name="username">

Отправка формы

Удобно обрабатывайте отправку формы с помощью привязки событий Angular:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Проверка формы

Angular предоставляет удобные директивы проверки, такие как required и minlength:

<input name="username" ngModel required minlength="4">

Доступ к состоянию формы

Получайте доступ к состоянию формы, например к её корректности или статусу изменения, через переменные шаблона:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Итоги

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