Занятие 7.

Формы

SIS.Angular.2018

Петров  Андрей

План занятия

  • Шаблонные формы
  • Реактивные формы

Формы везде!

Разные формы

Требования к формам

  • Ввод данных

  • Валидация

  • Отображение сообщений об ошибках

  • Возможность поймать событие подтверждения формы

Типовые формы на HTML

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <button type="submit">Submit</button>
</form>

  • Тэг form

  • Несколько полей ввода

  • Кнопка подтверждения формы

  • Атрибут action

Простейшие формы

Ввод чисел в калькуляторе

<input [(ngModel)]="inputValue">
<div>
  <button (click)="plus()">+</button>
  <button (click)="divide()">/</button>
  <button (click)="multiply()">*</button>
  <button (click)="calculate()">=</button>
</div>

Ввод названия задачи в канбане

<label title="Название задачи">Задача:
  <input [(ngModel)]="taskName">
</label>
<button (click)="createTask()">Создать</button>

Шаблонные формы

Формы с использованием ngModel

<form>
    <label>Фамилия <input [(ngModel)]="lastName"></label>
    <label>Имя <input [(ngModel)]="name"></label>
</form>
@Component({
             selector: 'sis-contacts',
             templateUrl: './contacts.component.html',
             styleUrls: ['./contacts.component.css'],
           })
export class ContactsComponent {
    name: string;
    lastName: string;

    constructor() { }
}

Подтверждение шаблонных форм

Событие submit

<form (submit)='saveInfo()'>
    <label>Фамилия <input [(ngModel)]="lastName"></label>
    <label>Имя <input [(ngModel)]="name"></label>
    <button type="submit">Сохранить</button>
</form>
@Component({
             selector: 'sis-contacts',
             templateUrl: './contacts.component.html',
             styleUrls: ['./contacts.component.css'],
           })
export class ContactsComponent {
    name: string;
    lastName: string;

    constructor() { }

    saveInfo() {
        // Process info here
    }
}

Валидация шаблонных форм

<form (submit)='lastNameModel.valid && nameModel.valid && saveInfo()'>
    <label>
        Фамилия
        <input [(ngModel)]="lastName" 
               #lastNameModel="ngModel"
               required>
    </label>
    <label>
        Имя
        <input [(ngModel)]="name" 
               #nameModel="ngModel"
               required 
               minlength="4">
    </label>
    <button type="submit">Сохранить</button>
</form>

Реактивные формы

Шаблонные формы

Для реактивных форм нужно импортировать модуль ReactiveFormsModule

FormControl

Основной строительный кирпичик реактивных форм

<form (submit)="processForm()">
    <label>Фамилия <input [formControl]="lastName"></label>
    <label>Имя <input [formControl]="name"></label>
</form>
@Component({
             selector: 'sis-contacts',
             templateUrl: './contacts.component.html',
             styleUrls: ['./contacts.component.css'],
           })
export class ContactsComponent {
    name: FormControl;
    lastName: FormControl;

    constructor() {
        this.name = new FormControl('');
        this.lastName =  = new FormControl('');
    }


    processForm() {
        // Process form data
    }
}

Основные методы FormControl

  • value
    Текущее значение контрола

  • touched
    Флаг, взаимодействовал ли пользователь с контролом

  • setValue(value: any)
    Установка нового значения

  • reset(value: any)
    Сброс состояния контрола

  • valid
    Флаг валидности контрола

  • error
    Описание ошибок валидации

Валидация FormControl

@Component({
             selector: 'sis-contacts',
             templateUrl: './contacts.component.html',
             styleUrls: ['./contacts.component.css'],
           })
export class ContactsComponent {
    name: FormControl;
    lastName: FormControl;

    constructor() {
        this.name = new FormControl('', [Validators.required]);
        this.lastName = new FormControl('', [Validators.required, Validators.minLength(4)]);
    }

    processForm() {
        if (this.name.valid && this.lastName.valid) {
            // Process form data
        }
    }
}

FormGroup

export class ContactsComponent {
    contactsForm: FormGroup;

    constructor() {
        this.contactsForm = new FormGroup({
                                            name: new FormControl(''),
                                            lastName: new FormControl(''),
                                         });
    }

    processForm() {
        if (this.contactsForm.valid) {
            // Process form data
        }
    }
}
<form [formGroup]="contactsForm" (submit)="processForm()">
    <label>Фамилия <input formControlName="lastName"></label>
    <label>Имя <input formControlName="name"></label>
</form>

Объединяет несколько FormControl'ов в единое целое

Особенности методов FormGroup

  • value
    Объект, ключ – название контрола, значение – значение контрола
     

  • setValue(value: any)
    Принимает объект, ключ – название контрола, значение – значение контрола
     

  • reset(value: any)
    Принимает объект, ключ – название контрола, значение – значение контрола
     

  • error
    Описание ошибок валидации формы

Отличия от FormControl

Практика

Задача: добавить в доску канбана полноценную форму с полями:

  • Название (обязательно, максимальная длина – 50 символов)

  • Описание (обязательное максимальная длина – 250 символов)

  • Исполнитель

Полезные ссылки

  1. Основы работы с пользовательским вводом
    https://angular.io/guide/user-input
     

  2. Шаблонные формы
    https://angular.io/guide/forms
     

  3. Реактивные формы
    https://angular.io/guide/reactive-forms
     

  4. Валидация формhttps://angular.io/guide/form-validation

Вопросы?

Made with Slides.com