该技能用于在 Angular 中创建带校验的表单,核心是 Angular Signal Forms。资料说明 Signal Forms 在 Angular v21+ 中仍属实验性特性,使用时需注意 API 可能变化。
用途:帮助开发者用类型安全的方式构建响应式表单,并集中声明校验规则。
主要能力:
- 校验 schema:通过 schema() 定义规则,支持 required、email、minLength、maxLength、min、max、pattern 等内置校验器,每条规则可带自定义错误消息。
- 自定义校验:用 validate() 编写校验逻辑,返回 customError({ kind, message }) 或 null,可实现用户名校验、密码强度(长度、大写字母、数字)等规则。
- 跨字段校验:例如确认密码时,在 confirmPassword 的校验中读取 password 的值;两者不一致时返回错误。
- 嵌套对象:可直接对 f.address.street、f.address.city、f.address.zip 等路径声明校验,并在模板中绑定。
- 动态数组:用 applyEach() 为数组每一项声明校验;配合 signal 的 update 实现添加和删除条目。
- 字段状态与方法:字段状态包括 value、controlValue、valid、invalid、errors、touched、dirty、pending、disabled、hidden、readonly;方法包括 reset、markAsTouched、markAsDirty。
- 表单整体状态:可用 computed 派生 isValid、isDirty、canSubmit 等信号,用于控制提交按钮。
- 与模板和 Material 集成:使用 Field 指令绑定输入;可在 touched 或 dirty 后遍历 errors(),按 error.kind 显示消息;也可配合 MatFormField、MatInput、MatError 使用。
使用方式(依据示例):先定义 TypeScript 接口;用 schema() 创建校验规则;用 signal() 保存表单状态;用 form(this.user, userSchema) 创建表单;组件中导入 Field 指令;模板中通过 [field] 绑定字段;提交时检查 userForm().valid()。示例中还建议使用 OnPush 变更检测(ChangeDetectionStrategy.OnPush),并在导入时使用 @angular/forms/signals。
适用场景:Angular 应用中的登录或注册表单、资料编辑、带嵌套地址的表单、可增删数组项的表单,以及需要统一组织校验规则的项目。资料举例把校验 schema 放在单独文件中导出复用。
限制:资料只说明 Signal Forms 是实验性特性;未提供安装命令、版本兼容细节、性能数据、收费信息或其他平台支持情况,这些暂未提供。