Angular 是一个流行的前端框架，它提供了众多的特性和工具，其中一个非常强大的特性就是响应式表单。在本文中，我们将会介绍 Angular 中响应式表单的概念、应用场景、创建方法以及使用示例。
什么是响应式表单？
响应式表单是 Angular 组件之一。它与模板驱动表单不同，模板驱动表单依赖于 DOM（文档对象模型）中的表单元素。而响应式表单则使用了 ReactiveX 框架提供的可观察对象，这些对象会响应表单中任何变化，并实时更新页面。因此，响应式表单更加适用于大型复杂的表单应用。在 Angular 中，响应式表单由 FormControl、FormGroup 和 FormArray 类组成。
FormControl：它是单个表单控件类，例如一个文本框或者复选框。
FormGroup：它是多个 FormControl 控件类的容器类，用于表示整个表单。
FormArray：它是 FormGroup 和 FormControl 的数组，可以用于重复的控件。
响应式表单应用场景
响应式表单适用于任何表单操作，特别是适用于大型复杂表单，例如注册表单、购物表单、查询表单、调查表单等。响应式表单可以实时验证表单有效性（Valid）、无效性（Invalid）和未决（Pending），可以使用自定义验证器（Validator），并且可以在控件状态发生变化时（例如，控件的值改变）发出通知，从而使页面上相关数据及时更新。
如何创建响应式表单？
要创建响应式表单，我们需要导入 Angular Forms 模块，并使用 FormBuilder 类。下面的代码是一个示例，用于创建一个响应式表单：
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html',
styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent {
registrationForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.registrationForm = this.formBuilder.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['']
});
}
}如何使用响应式表单？
在创建了响应式表单后，我们需要在页面上进行渲染。下面是一个简单的 HTML 表单，用于接收用户输入的数据：
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div>
<label>First Name</label>
<input type="text" formControlName="firstName">
<div *ngIf="registrationForm.get('firstName').invalid && registrationForm.get('firstName').touched" class="alert alert-danger">
<div *ngIf="registrationForm.get('firstName').errors.required">First Name is required</div>
<div *ngIf="registrationForm.get('firstName').errors.minlength">First Name should have at least 3 characters</div>
</div>
</div>
<div>
<label>Last Name</label>
<input type="text" formControlName="lastName">
<div *ngIf="registrationForm.get('lastName').invalid && registrationForm.get('lastName').touched" class="alert alert-danger">
<div *ngIf="registrationForm.get('lastName').errors.required">Last Name is required</div>
<div *ngIf="registrationForm.get('lastName').errors.minlength">Last Name should have at least 3 characters</div>
</div>
</div>
<div>
<label>Email</label>
<input type="email" formControlName="email">
<div *ngIf="registrationForm.get('email').invalid && registrationForm.get('email').touched" class="alert alert-danger">
<div *ngIf="registrationForm.get('email').errors.required">Email is required</div>
<div *ngIf="registrationForm.get('email').errors.email">Enter a valid email</div>
</div>
</div>
<div>
<label>Password</label>
<input type="password" formControlName="password">
<div *ngIf="registrationForm.get('password').invalid && registrationForm.get('password').touched" class="alert alert-danger">
<div *ngIf="registrationForm.get('password').errors.required">Password is required</div>
<div *ngIf="registrationForm.get('password').errors.minlength">Password should have at least 6 characters</div>
</div>
</div>
<div>
<label>Confirm Password</label>
<input type="password" formControlName="confirmPassword">
<div *ngIf="registrationForm.get('confirmPassword').hasError('required') && registrationForm.get('confirmPassword').touched" class="alert alert-danger">
Confirm Password is required
</div>
</div>
<div>
<button type="submit" [disabled]="registrationForm.invalid">Submit</button>
</div>
</form>值得注意的是，我们需要使用 formGroup 和 formControlName 属性将表单控件绑定到表单模型。示例代码中，我们还使用了各种 Angular 系统提供的指令（例如 *ngIf）来显示控件的效果状态以及错误消息。
总结
在本文中，我们介绍了 Angular 中响应式表单的概念、应用场景、创建方法以及使用示例。响应式表单是 Angular 中非常强大的特性之一，它提供了可观察的数据流浪和实时更新页面的功能，使得表单操作更加简单、直观、高效。希望本文对你理解 Angular 中响应式表单有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b48e2aadd4f0e0ffd7568f