Перейти к содержанию

Формы

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

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

Ссылки

Комментарии