Template-driven формы в Angular
В этом видео мы начнем обсужать формы. В Angular есть два механизма организации работы с формами — template-driven и reactive формы. Сегодня мы обсудим template-driven подход.
Template-driven форма привязывает свойства класса компонента через механизм двунаправленной привязки. Двунаправленная привязка (two-way binding) — механизм, который синхронизирует данные между моделью (класс компонента) и представлением (шаблоном).
Чтобы привязать данные к input полю, нужно использовать атрибут ngModel в теге ввода данных (см пример кода ниже). Каждое поле — это одно свойство класса. Чтобы выполнить отправку формы, то следует привязать событие (ngSubmit) к форме.
В реальном приложении формы могут быть довольно большими. Поэтому при отправке полезно использовать директиву ngForm, которая являтеся по сути объектом формы со значаениями и другими полезными свойствами (например, состояние валидности формы). Подробнее об NgForm можно почитать на сайте Angular. Помимо большого количества полей ввода они могут быть связаны между собой (например почтовый индекс зависит от страны и пр). Приходится отслеживать эти свзязи, что может быть очень неудобно. Для таких случаев удобнее использовать reactive формы, о которых мы поговорим на следующем уроке
app.ts
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
selector: 'app-root',
imports: [
],
templateUrl: './app.html',
styleUrl: './app.scss'
})
export class App {
protected login = '';
protected password = '';
protected selectedRole = 'guest';
protected roles = ['admin', 'guest'];
protected submitForm(form: NgForm) {
console.log(form.value);
console.log('form is valid: ', form.valid);
}
}app.html
<form (ngSubmit)="submitForm(loginForm)" #loginForm="ngForm">
<div>
<label for="login">Login</label>
<input required type="text" id="login" name="login" [(ngModel)]="login">
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" [(ngModel)]="password">
</div>
<div>
<select name="role" [(ngModel)]="selectedRole">
@for (role of roles; track role) {
<option>{{role}}</option>
}
</select>
</div>
<button [disabled]="!loginForm.valid">Login</button>
</form>
0 Comments