在 Angular 开发中，表单是交互层的核心组件之一。Angular 提供了两种表单实现方式：模板驱动表单和响应式表单。其中响应式表单（Reactive Forms）以其可测试性、可复用性和对表单状态的精准控制，成为中大型项目的首选。本文将从基础到进阶，全面讲解响应式表单的核心概念 ——FormControl、FormGroup 与 FormBuilder，帮助你掌握 Angular 响应式表单的使用精髓。
一、响应式表单核心概念
响应式表单的核心思想是在组件类中显式定义表单结构和验证规则，而非依赖模板中的指令。其底层依赖@angular/forms模块，核心类包括：
FormControl：控制单个表单控件的值和状态（如输入框、单选框）；FormGroup：将多个 FormControl 分组，管理一组控件的整体状态；FormBuilder：简化 FormControl 和 FormGroup 的创建，减少重复代码；FormArray：动态管理一组 FormControl/FormGroup（本文暂不展开，后续单独讲解）。
前置准备：引入响应式表单模块
使用响应式表单前，需在模块中导入ReactiveFormsModule：
// app.module.ts import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, ReactiveFormsModule], // 导入核心模块 providers: [], bootstrap: [AppComponent] }) export class AppModule { }二、FormControl：单个表单控件的核心
FormControl是响应式表单的最小单元，用于封装单个表单控件的值、验证状态、交互状态（如是否脏、是否被触碰）。
1. 基本创建与使用
在组件类中创建 FormControl，绑定到模板的表单控件：
// app.component.ts import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'app-root', template: ` <input [formControl]="username" placeholder="请输入用户名"> <p>控件值：{{ username.value }}</p> <p>控件状态：{{ username.status }}</p> <p>是否脏（修改过）：{{ username.dirty }}</p> <p>是否触碰过：{{ username.touched }}</p> ` }) export class AppComponent { // 创建FormControl，可传入初始值 username = new FormControl('默认用户名'); }2. FormControl 的核心属性与方法
| 属性 / 方法 | 说明 |
|---|---|
value | 控件当前值 |
status | 验证状态（VALID/INVALID/PENDING/DISABLED） |
dirty | 是否修改过（值被改变） |
touched | 是否触碰过（失去焦点） |
valid/invalid | 验证是否通过 |
setValue(val) | 设置控件值（严格匹配类型） |
patchValue(val) | 灵活设置值（兼容部分更新） |
reset() | 重置控件值和状态 |
markAsDirty() | 手动标记为 “脏” 状态 |
示例：手动修改和重置控件值
// 手动设置值 this.username.setValue('新用户名'); // 重置控件（值清空，状态恢复初始） this.username.reset();3. 带验证的 FormControl
创建 FormControl 时可传入验证器（同步 / 异步），实现表单校验：
// 导入验证器 import { FormControl, Validators } from '@angular/forms'; // 带必填和长度验证的FormControl username = new FormControl('', [ Validators.required, // 必填 Validators.minLength(3) // 最小长度3 ]); // 模板中展示错误信息 template: ` <input [formControl]="username" placeholder="请输入用户名"> <div *ngIf="username.invalid && (username.dirty || username.touched)"> <p *ngIf="username.errors?.required">用户名不能为空</p> <p *ngIf="username.errors?.minlength">用户名至少3个字符</p> </div> `三、FormGroup：表单控件的分组管理
实际开发中，表单通常包含多个控件（如用户名、密码、邮箱），FormGroup可将这些FormControl分组，统一管理表单的整体状态和值。
1. 基本创建与使用
import { Component } from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', template: ` <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> <div> <label>用户名：</label> <input formControlName="username" placeholder="请输入用户名"> <div *ngIf="loginForm.get('username')?.invalid && loginForm.get('username')?.touched"> <p *ngIf="loginForm.get('username')?.errors?.required">用户名不能为空</p> </div> </div> <div> <label>密码：</label> <input type="password" formControlName="password" placeholder="请输入密码"> <div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched"> <p *ngIf="loginForm.get('password')?.errors?.required">密码不能为空</p> <p *ngIf="loginForm.get('password')?.errors?.minlength">密码至少6个字符</p> </div> </div> <button type="submit" [disabled]="loginForm.invalid">提交</button> </form> <p>表单整体值：{{ loginForm.value | json }}</p> <p>表单整体状态：{{ loginForm.status }}</p> ` }) export class AppComponent { // 创建FormGroup，包含多个FormControl loginForm = new FormGroup({ username: new FormControl('', Validators.required), password: new FormControl('', [ Validators.required, Validators.minLength(6) ]) }); onSubmit() { if (this.loginForm.valid) { console.log('表单提交值：', this.loginForm.value); // 业务逻辑：提交到后端、重置表单等 this.loginForm.reset(); } } }2. FormGroup 的核心操作
- 获取子控件：
loginForm.get('username')（推荐）或loginForm.controls.username； - 整体设置值：
loginForm.setValue({ username: 'admin', password: '123456' })（需传入完整对象）； - 部分设置值：
loginForm.patchValue({ username: 'admin' })（仅更新指定字段）； - 重置表单：
loginForm.reset()（清空所有值，恢复初始状态）； - 验证状态：
loginForm.valid/loginForm.invalid（整个表单的验证状态）。
3. 嵌套 FormGroup
支持 FormGroup 嵌套，适用于复杂表单（如用户信息包含基本信息、地址信息）：
// 嵌套FormGroup userForm = new FormGroup({ basicInfo: new FormGroup({ username: new FormControl('', Validators.required), email: new FormControl('', [Validators.required, Validators.email]) }), address: new FormGroup({ province: new FormControl('', Validators.required), city: new FormControl('', Validators.required) }) }); // 模板中使用 template: ` <form [formGroup]="userForm"> <div formGroupName="basicInfo"> <input formControlName="username" placeholder="用户名"> <input formControlName="email" placeholder="邮箱"> </div> <div formGroupName="address"> <input formControlName="province" placeholder="省份"> <input formControlName="city" placeholder="城市"> </div> </form> `四、FormBuilder：简化表单创建的工具
FormBuilder是 Angular 提供的便捷工具，可大幅简化FormControl和FormGroup的创建代码，避免重复的new操作。
1. 基本使用（注入 FormBuilder）
import { Component } from '@angular/core'; import { FormBuilder, Validators } from '@angular/forms'; @Component({ selector: 'app-root', template: ` <form [formGroup]="loginForm" (ngSubmit)="onSubmit()"> <!-- 模板内容与FormGroup示例一致 --> </form> ` }) export class AppComponent { loginForm; // 注入FormBuilder constructor(private fb: FormBuilder) { // 使用fb创建表单 this.loginForm = this.fb.group({ username: ['', Validators.required], // [初始值, 同步验证器, 异步验证器] password: ['', [Validators.required, Validators.minLength(6)]] }); } onSubmit() { console.log(this.loginForm.value); } }2. 嵌套 FormGroup（FormBuilder 版）
// 嵌套表单简化写法 userForm = this.fb.group({ basicInfo: this.fb.group({ username: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }), address: this.fb.group({ province: ['', Validators.required], city: ['', Validators.required] }) });3. FormBuilder 的核心方法
| 方法 | 说明 |
|---|---|
control(initialValue, validators) | 创建 FormControl |
group(controlsConfig, options) | 创建 FormGroup |
array(controlsConfig) | 创建 FormArray |
五、核心对比与最佳实践
1. FormControl vs FormGroup
FormControl：管理单个控件，聚焦 “点” 的状态；FormGroup：管理一组控件，聚焦 “面” 的状态；- 关系：FormGroup 是 FormControl 的容器，一个 FormGroup 可包含多个 FormControl / 子 FormGroup。
2. 原生创建 vs FormBuilder
- 原生
new FormControl()：代码冗余，但逻辑清晰，适合简单场景； FormBuilder：代码简洁，减少重复，适合复杂表单，是实际开发的首选。
3. 最佳实践
- 优先使用响应式表单：相比模板驱动表单，响应式表单更易测试、更易扩展；
- 封装验证规则：将通用验证规则（如手机号、邮箱）封装为自定义验证器，提高复用性；
- 避免直接操作 DOM：通过 FormControl/FormGroup 的 API 修改值和状态，而非原生 DOM 操作；
- 表单提交前校验：即使模板有禁用提交按钮，提交方法内仍需二次校验
form.valid； - 合理分组：复杂表单使用嵌套 FormGroup，提升代码可读性；
- 使用 getter 简化代码：频繁获取子控件时，封装 getter：
get username() { return this.loginForm.get('username'); } // 模板中：*ngIf="username.invalid && username.touched"
六、总结
Angular 响应式表单的核心是FormControl（单个控件）、FormGroup（控件分组）和FormBuilder（简化创建）。掌握这三个核心工具，你可以灵活构建从简单到复杂的表单，精准控制表单的状态、验证和交互。
响应式表单的优势在于 “可控性”—— 所有表单逻辑集中在组件类中，便于调试、测试和维护。在实际开发中，结合自定义验证器、FormArray（动态表单）和 RxJS（监听表单值变化），可以应对几乎所有表单场景。
下一篇我们将深入讲解FormArray（动态增减表单控件）和自定义验证器，敬请期待！
