Что такое реактивные формы?
Реактивные формы в Angular — это мощный подход к созданию форм, который позволяет управлять состоянием форм и их валидацией через Reactive Programming (реактивное программирование). Этот подход предоставляет разработчику возможность создавать сложные формы с более сложной логикой валидации и управления состоянием.
Реактивные формы в отличие от模板ных форм (Template-driven forms) требуют от разработчика явного определения структуры формы и ее поведения в коде. Это делает реактивные формы более предсказуемыми и тестируемыми.
Основные компоненты реактивных форм
- FormGroup – представляет собой группу полей формы.
- FormControl – представляет одно поле формы и содержит его значение и состояние.
- FormArray – представляет собой массив экземпляров FormControl и/или FormGroup, позволяя создавать динамические формы.
Как создать реактивную форму
- Импортируйте ReactiveFormsModule в ваш модуль:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [/* ваши компоненты */],
imports: [
ReactiveFormsModule
// другие модули
],
bootstrap: [/* ваш корневой компонент */]
})
export class AppModule { }
- Создайте форму в компоненте:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-demo-form',
templateUrl: './demo-form.component.html'
})
export class DemoFormComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(6)])
});
}
onSubmit() {
if (this.myForm.valid) {
console.log(this.myForm.value);
}
}
}
- Создайте HTML-шаблон для формы:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Имя:</label>
<input id="name" formControlName="name">
<div *ngIf="myForm.get('name')?.invalid && myForm.get('name')?.touched">
<small>Имя обязательно и должно содержать минимум 3 символа.</small>
</div>
</div>
<div>
<label for="email">Электронная почта:</label>
<input id="email" formControlName="email">
<div *ngIf="myForm.get('email')?.invalid && myForm.get('email')?.touched">
<small>Неправильный формат электронной почты.</small>
</div>
</div>
<div>
<label for="password">Пароль:</label>
<input type="password" id="password" formControlName="password">
<div *ngIf="myForm.get('password')?.invalid && myForm.get('password')?.touched">
<small>Пароль обязателен и должен содержать минимум 6 символов.</small>
</div>
</div>
<button type="submit" [disabled]="myForm.invalid">Отправить</button>
</form>
Заключение
Реактивные формы — это мощный инструмент в Angular, который помогает более детально управлять формами и их состоянием. Понимание основ FormGroup, FormControl и FormArray, а также умение создавать и валидировать формы, существенно улучшат ваши навыки в разработке с использованием Angular.