Инструменты пользователя
angular:angular2:forms:reactive_forms
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Следующая версия | Предыдущая версия | ||
|
angular:angular2:forms:reactive_forms [2021/02/14 21:39] werwolf создано |
angular:angular2:forms:reactive_forms [2023/01/12 12:18] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| - | =====Reactive Forms===== | + | ===== Reactive Forms ===== |
| В прошлых темах был описан подход Template-Driven, который концентрировался вокруг шаблона компонента: для работы с формой и ее элементами в шаблоне компонента к элементам html применялись директивы NgModel и NgForm, правила валидации задавались в тегах элементов с помощью атрибутов required и pattern. Но есть альтернативный подход - использование реактивных форм (Reactive Forms). Рассмотрим, в чем он заключается.\\ | В прошлых темах был описан подход Template-Driven, который концентрировался вокруг шаблона компонента: для работы с формой и ее элементами в шаблоне компонента к элементам html применялись директивы NgModel и NgForm, правила валидации задавались в тегах элементов с помощью атрибутов required и pattern. Но есть альтернативный подход - использование реактивных форм (Reactive Forms). Рассмотрим, в чем он заключается.\\ | ||
| \\ | \\ | ||
| При подходе Reactive Forms для формы создается набор объектов FormGroup и FormControl. Сама форма и ее подсекции представляют класс FormGroup, а отдельные элементы ввода - класс FormControl. Например, базовое создание формы:\\ | При подходе Reactive Forms для формы создается набор объектов FormGroup и FormControl. Сама форма и ее подсекции представляют класс FormGroup, а отдельные элементы ввода - класс FormControl. Например, базовое создание формы:\\ | ||
| - | \\ | ||
| <code javascript> | <code javascript> | ||
| this.form = new FormGroup(); | this.form = new FormGroup(); | ||
| Строка 21: | Строка 20: | ||
| ); | ); | ||
| </code> | </code> | ||
| - | Здесь определено четыре элемента: email, pass, country и userPhone.\\ | + | |
| - | \\ | + | Здесь определено четыре элемента: email, pass, country и userPhone.\ |
| Объект FormControl может иметь различные формы определения. (Подробнее можно посмотреть в [[https://angular.io/api/forms/FormControl|документации]]). В частности, в качестве первого параметра можно передавать значение по умолчанию для элемента, а в качестве второго параметра - набор валидаторов, при этом элементы формы можно группировать с помощью FormGroup: | Объект FormControl может иметь различные формы определения. (Подробнее можно посмотреть в [[https://angular.io/api/forms/FormControl|документации]]). В частности, в качестве первого параметра можно передавать значение по умолчанию для элемента, а в качестве второго параметра - набор валидаторов, при этом элементы формы можно группировать с помощью FormGroup: | ||
| Строка 43: | Строка 43: | ||
| \\ | \\ | ||
| Для привязки объекта myForm к конкретному элементу формы применяется атрибут **formGroup**: | Для привязки объекта myForm к конкретному элементу формы применяется атрибут **formGroup**: | ||
| - | \\ | ||
| <code javascript> | <code javascript> | ||
| <form [formGroup]="form" (ngSubmit)="onSubmit()"> | <form [formGroup]="form" (ngSubmit)="onSubmit()"> | ||
| </code> | </code> | ||
| - | Кроме того, необходимо связать объекты FormControl с элементами ввода с помощью атрибута formControlName:\\ | + | Кроме того, необходимо связать объекты FormControl с элементами ввода с помощью атрибута formControlName: |
| <code javascript> | <code javascript> | ||
| <input type="text" class="form-control" formControlName="email"> | <input type="text" class="form-control" formControlName="email"> | ||
| Строка 135: | Строка 135: | ||
| </div> | </div> | ||
| </code> | </code> | ||
| + | |||
| Для отображения ошибок валидации здесь используется параграфы с классом help-block, в которых определены выражения типа | Для отображения ошибок валидации здесь используется параграфы с классом help-block, в которых определены выражения типа | ||
| + | |||
| <code javascript> | <code javascript> | ||
| <p class="help-block" *ngIf="form.get('user.email').invalid && form.get('user.email').touched">Не правильно прописан email</p> | <p class="help-block" *ngIf="form.get('user.email').invalid && form.get('user.email').touched">Не правильно прописан email</p> | ||
| Строка 143: | Строка 145: | ||
| \\ | \\ | ||
| Но чтобы все это заработало, необходимо импортировать модуль **ReactiveFormsModule**. Для этого изменим модуль приложения **AppModule**: | Но чтобы все это заработало, необходимо импортировать модуль **ReactiveFormsModule**. Для этого изменим модуль приложения **AppModule**: | ||
| - | |||
| <code javascript> | <code javascript> | ||
| import { BrowserModule } from '@angular/platform-browser'; | import { BrowserModule } from '@angular/platform-browser'; | ||
| Строка 166: | Строка 167: | ||
| export class AppModule { } | export class AppModule { } | ||
| </code> | </code> | ||
| + | |||
| + | {{ :angular:angular2:forms:screen6.png |}} | ||
| - | {{ :angular:angular2:forms:screen5.png |}} | ||
angular/angular2/forms/reactive_forms.1613327988.txt.gz · Последние изменения: 2023/01/12 12:15 (внешнее изменение)
Инструменты страницы
Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
