SuperAPI AI 工具集

angular-forms

前端与建站

查看项目

更新于 10-20 16:18

技能介绍

用途:本技能面向 Angular v21+,介绍如何使用新的 Signal Forms API 构建基于信号的响应式表单,实现自动双向绑定、基于 schema 的校验和响应式字段状态。资料同时提示:Signal Forms 在 Angular v21 中为实验性特性;若生产应用需要稳定性,应参考 Reactive Forms 模式(资料指向 references/form-patterns.md)。

主要能力:

  1. 表单模型:使用可写 signal 作为单一数据源,通过 form(model) 创建表单,支持嵌套字段的点号访问。
  2. 读取与更新:可读取整个模型或单个字段值,支持整体替换模型、更新单个字段值。
  3. 字段状态:每个字段提供验证状态(valid、invalid、errors、pending)、交互状态(touched、dirty)、可用状态(disabled、hidden、readonly)及当前值等信号。
  4. 表单级状态:表单本身也是字段,聚合 valid、touched、dirty 等状态。
  5. 校验:内置 required、email、min、max、minLength、maxLength、pattern 等校验器;支持带条件(when)的条件校验、自定义 validate、跨字段校验、基于 validateHttp 的异步校验。
  6. 条件字段:通过 hidden、disabled、readonly 控制字段的显示、禁用与只读。
  7. 提交:使用 submit(form, callback) 在有效时标记字段并执行回调。
  8. 数组与动态字段:配合 applyEach 对数组元素逐项校验,支持动态添加与删除项。
  9. 错误展示与状态样式:用 touched、invalid、errors、pending 展示错误与校验中提示,并按状态绑定样式类。
  10. 重置:调用 form().reset() 清除交互状态,再通过 model.set 重置值。

使用方式:资料以代码示例展示具体写法,包括从 @angular/forms/signals 导入 form、FormField、required、email 等,在模板中使用 [formField] 绑定字段,在组件中定义 signal 模型与 form 校验 schema;示例代码与安装/导入语句应保持原样。

适用场景:适合已使用 Angular v21+ 并希望采用信号式表单模型的开发场景,如登录表单、用户资料、订单与动态列表等需要校验与字段状态管理的表单。

限制:Signal Forms 在 Angular v21 中为实验性,生产环境稳定性未保证,资料建议改用 Reactive Forms;资料未提供版本兼容细节、性能数据、安装命令或价格等信息,相关内容暂未提供。