用途:在创建或修改 Angular 响应式表单时使用,涉及校验、异步校验、依赖校验或 FormArray 时按平台既定模式实现。
主要能力:提供表单类型选择思路——基础表单用 PlatformFormComponent;带认证上下文通常用 AppBaseFormComponent;异步校验在其基础上加 ifAsyncValidator;跨字段校验用 dependentValidations;动态字段用 FormArray 配置。要求先搜索已有表单(grep "{Feature}FormComponent" --include="*.ts"),再阅读设计系统与表单模式文档,定义 ViewModel 接口,实现 initialFormConfig()(控件、校验器、dependentValidations)与 initOrReloadVm()(新建/编辑加载),添加带 validateForm() 守卫的 onSubmit(),模板使用 BEM 类。
关键规则:提交前必须调用 validateForm();异步校验器必须用 ifAsyncValidator(condition, validator) 包裹,不可无条件运行;跨字段重校验配置 dependentValidations;FormArray 使用 { modelItems, itemControl } 配置模式;模板中用 formControls('name') 访问控件;加载态用 isLoading$('save')()。文件位置为 src/Frontend/apps/{app-name}/src/app/features/{feature}/ 下的 {feature}-form.component.ts|html|scss。
实施前须读取:.claude/skills/shared/angular-design-system.md、.claude/skills/shared/bem-component-examples.md、.claude/skills/frontend-angular-form/references/form-patterns.md,以及目标应用设计系统 docs/design-system/03-form-patterns.md。
限制与注意:避免以下反模式——提交前缺少 validateForm()、异步校验器无 ifAsyncValidator 条件包裹、FormArray 模板循环缺 [formGroupName]="i"、表单元素无 BEM 类、校验规则缺错误提示。按核对清单逐项验证。任务应拆分为多个小待办,并追加最终复查任务。