Angular 的 Reactive Forms 是一种基于模型的表单处理方式,通过 FormGroup
和 FormControl
构建灵活且可维护的表单结构。它特别适合需要复杂表单验证、动态表单或表单状态管理的场景。
核心特性 ✅
- 响应式编程风格:与模板驱动表单(Template Driven)形成对比,采用声明式方式管理表单数据
- 强类型支持:结合 TypeScript 实现类型安全的表单控制
- 嵌套表单组:支持多级表单结构(如
FormGroup
包含多个FormControl
) - 实时验证:可以设置同步/异步验证规则,提升用户体验
常见使用场景 🌐
- 多步骤表单(如注册流程)
- 动态表单字段(根据用户输入添加/移除字段)
- 复杂数据绑定(如表单值与组件状态双向绑定)
- 高级表单验证(如自定义校验器、异步校验)
示例代码 🧱
// 创建表单组
const form = new FormGroup({
username: new FormControl('', [Validators.required, Validators.minLength(5)]),
email: new FormControl('', [Validators.email, Validators.required])
});
// 访问表单值
console.log(form.value);
// 监听表单变化
form.valueChanges.subscribe(values => {
console.log('表单值更新:', values);
});
学习资源 📚
提示:如需深入理解表单控制流,建议结合 Angular 信号(Signals) 知识进行对比学习。