Обзор форм

Формы являются важной частью многих приложений, поскольку они позволяют принимать пользовательский ввод. Давайте узнаем, как работать с формами в Angular.

В Angular существует два типа форм: управляемые шаблонами (template-driven) и реактивные (reactive). Вы узнаете об обоих типах в следующих нескольких уроках.

В этом уроке вы узнаете, как создать форму, используя подход template-driven (управляемый шаблоном).

1. Create an input field

   В файле user.ts обновите шаблон, добавив текстовое поле ввода с id, установленным в framework, и типом text.

   <label for="framework">
     Favorite Framework:
     <input id="framework" type="text" />
   </label>

2. Import FormsModule

   Чтобы эта форма могла использовать функции Angular, обеспечивающие привязку данных к формам, необходимо импортировать FormsModule.

   Импортируйте FormsModule из @angular/forms и добавьте его в массив imports компонента User.

   import {Component} from '@angular/core';
   import {FormsModule} from '@angular/forms';
   
   @Component({
   ...
   imports: [FormsModule],
   })
   export class User {}

3. Add binding to the value of the input

   В FormsModule есть директива ngModel, которая привязывает значение поля ввода к свойству вашего класса.

   Обновите поле ввода, чтобы использовать директиву ngModel, используя синтаксис [(ngModel)]="favoriteFramework" для привязки к свойству favoriteFramework.

   <label for="framework">
     Favorite Framework:
     <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
   </label>

   После внесения изменений попробуйте ввести значение в поле ввода. Обратите внимание, как оно обновляется на экране (да, очень круто).

   ПРИМЕЧАНИЕ: Синтаксис [()] известен как «банан в коробке» (banana in a box), но он представляет собой двустороннюю привязку: привязку свойств и привязку событий. Подробнее читайте в документации Angular о двусторонней привязке данных.

Вы сделали важный первый шаг к созданию форм с помощью Angular.

Отличная работа. Продолжаем в том же духе!