Занятие 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 символов)
-
Исполнитель
Полезные ссылки
-
Основы работы с пользовательским вводом
https://angular.io/guide/user-input
-
Шаблонные формы
https://angular.io/guide/forms
-
Реактивные формы
https://angular.io/guide/reactive-forms
-
Валидация формhttps://angular.io/guide/form-validation
Вопросы?
Angular Forms
By walkingdev
Angular Forms
- 467