01
Авг
2019

Формы

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

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

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

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

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

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

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


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


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

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


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

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

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


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

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


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

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


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

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

Share

Тебе может это понравится...