Формы¶

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

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

• Стандартные (Template-driven);
• Реактивные (Reactive).

Данная глава посвящена рассмотрению стандартных форм, реактивные рассмотрены отдельно.

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<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, которое является отображением модели формы.

1
2
3
4

loginForm: any = {
    login: '',
    password: '',
};

Чтобы связать объект loginForm с соответствующими полями, используется директива [(ngModel)].

1
2
3
4
5
6
7

<input
    type="text"
    [(ngModel)]="loginForm.login"
    id="login"
    required
    name="login"
/>

Запись вида [()] является комбинированием двух механизмов передачи данных в Angular, каждый из которых работает только в одностороннем режиме. [] — это передача данных из переменной в поле (свойство @Input()), () — из поля в переменную (свойство @Output()).

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

1
2
3
4

loginForm: any = {
    login: 'Логин по умолчанию',
    password: '',
};

Чтобы убедиться, что данные передаются и из Angular формы в обратную сторону, создадим метод printForm(), который будет выводить значение в консоль.

1
2
3

printForm(){
    console.log(this.loginForm);
}

Теперь соединим все описанное выше в одно.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<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 формы, нажмите кнопку "Войти" и проверьте консоль, чтобы убедиться, что данные успешно были переданы в класс компонента.

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

Ссылки¶

• Forms

Комментарии