用途
Angular Reactive Forms 采用模型驱动方式处理表单输入,内置校验、状态管理能力,并与 Angular 的响应式编程模式集成。当你需要创建响应式表单、实现校验器、处理表单提交或与 NgRx Signals 状态库配合时,可使用该技能。
主要能力
表单创建
- 使用 ReactiveFormsModule 创建响应式表单
- 使用 FormControl 表示单个字段
- 使用 FormGroup 组合多个表单控件
- 使用 FormArray 处理动态列表
- 使用 FormBuilder 简化表单创建
校验
- 内置校验器:Validators.required、Validators.email、Validators.min、Validators.max、Validators.pattern
- 自定义校验器必须返回 ValidationErrors | null
- 仅在字段被 touched 后显示校验错误
- 表单无效时禁用提交按钮
表单状态管理
- 检查表单状态:valid、invalid、touched、dirty、pristine
- 使用 form.reset() 重置表单
- 使用 form.patchValue() 或 form.setValue() 更新表单值
NgRx Signals 集成
- 将表单实例存入 signalStore 状态
- 使用 rxMethod 处理异步表单提交
- 使用 tapResponse 处理提交成功/错误
- 提交成功后重置表单
表单提交
- 使用 (ngSubmit) 事件处理提交
- 处理前校验:if (form.valid)
- 处理错误并向用户反馈
使用方式
基础响应式表单通过 FormGroup 与 FormControl 构建,模板中使用 [formGroup] 绑定和 formControlName 关联字段,提交时通过 (ngSubmit) 触发方法并校验 form.valid。自定义校验器以工厂函数形式返回 ValidatorFn,接收 AbstractControl 并返回 ValidationErrors 或 null。NgRx Signals 集成时,在 signalStore 的 withState 中保存 FormGroup,在 withMethods 中使用 rxMethod 配合 switchMap 与 tapResponse 完成异步提交和状态更新。
适用场景
- 使用 FormControl 和 FormGroup 创建响应式表单
- 实现内置和自定义校验器
- 处理表单提交与数据绑定
- 使用 FormArray 构建动态表单
- 实现跨字段校验
- 将表单与 NgRx Signals store 集成
- 处理异步校验器
- 实现表单状态管理(touched、dirty、valid)
- 创建可复用表单组件
限制
资料未提供关于该技能的具体安装命令、平台兼容范围、收费模式及性能表现等信息,暂未提供。