Формы

Манипуляция формами (Angular forms) осуществляется мощными и продуманными инструментами библиотеки @angular/forms.

С точки зрения Angular различают формы:

Стандартные (Template-driven);
Реактивные (Reactive).
Данная глава посвящена рассмотрению стандартных форм, реактивные рассмотрены отдельно.

Для создания Angular форм импортируйте FormsModule из @angular/forms.

Не забудьте добавить FormsModule в корневой модуль.

Начнем с создания обычной HTML-формы логина.


<form>
<div>
<label>Логин</label>
<input type="text" required name="login" />
</div>
<div>
<label>Пароль</label>
<input type="password" required name="password" />
</div>

<button>Войти</button>
</form>
Для работы со значениями полей Angular формы создадим в классе компонента свойство loginForm, которое является отображением модели формы.


loginForm: any = {
login: '',
password: '',
}
Чтобы связать объект loginForm с соответствующими полями, используется директива [(ngModel)].


<input
type="text"
[(ngModel)]="loginForm.login"
id="login"
required
name="login"
/>
Запись вида [()] является комбинированием двух механизмов передачи данных в Angular, каждый из которых работает только в одностороннем режиме. [] - это передача данных из переменной в поле (свойство @Input(), () - из поля в переменную (свойство @Output()).

Так для задания полю "Логин" значения по умолчанию, переменная loginForm должна быть определена следующим образом:


loginForm: any = {
login: 'Логин по умолчанию',
password: '',
}
Чтобы убедиться, что данные передаются и из Angular формы в обратную сторону, создадим метод printForm(), который будет выводить значение в консоль.


printForm(){
console.log(this.loginForm);
}
Теперь соединим все описанное выше в одно.


<form>
<div>
<label>Логин</label>
<input
type="text"
[(ngModel)]="loginForm.login"
required
/>
</div>
<div>
<label>Пароль</label>
<input
type="password"
[(ngModel)]="loginForm.password"
required
/>
</div>

<button (click)="printForm()">Войти</button>
</form>
Заполнив поля Angular формы, нажмите кнопку "Войти" и проверьте консоль, чтобы убедиться, что данные успешно были переданы в класс компонента.

Валидация форм рассмотрена отдельно.