frontend-angular-form

```

What type of form?

├── Basic form (no auth) → PlatformFormComponent

├── Form with auth context → AppBaseFormComponent (typical choice)

├── With async validation → AppBaseFormComponent + ifAsyncValidator

├── Cross-field validation → AppBaseFormComponent + dependentValidations

└── Dynamic fields → AppBaseFormComponent + FormArray config

```

1. Search existing forms: grep "{Feature}FormComponent" --include="*.ts"
2. Read design system docs (see Read Directives below)
3. Define ViewModel interface for form data
4. Implement initialFormConfig() with controls, validators, dependentValidations
5. Implement initOrReloadVm() for create/edit mode data loading
6. Add onSubmit() with validateForm() guard
7. Template with BEM classes on all form elements
8. Verify checklist below

• Always call validateForm() before submit
• Use ifAsyncValidator(condition, validator) - never run async validators unconditionally
• Configure dependentValidations for cross-field re-validation
• FormArrays use { modelItems, itemControl } config pattern
• Use formControls('name') to access control in template
• Loading state: isLoading$('save')() in template

```

src/Frontend/apps/{app-name}/src/app/features/{feature}/

├── {feature}-form.component.ts|html|scss

```

IMPORTANT: You MUST read these files before writing any code. Do NOT skip.

1. ⚠️ MUST READ .claude/skills/shared/angular-design-system.md — hierarchy, SCSS, platform APIs
2. ⚠️ MUST READ .claude/skills/shared/bem-component-examples.md — BEM form examples
3. ⚠️ MUST READ .claude/skills/frontend-angular-form/references/form-patterns.md — basic, async, dependent, FormArray patterns
4. ⚠️ MUST READ target app design system: docs/design-system/03-form-patterns.md

• Missing validateForm() before submit
• Async validator without ifAsyncValidator conditional wrapper
• Missing [formGroupName]="i" in FormArray template loops
• Form elements without BEM classes
• Missing error messages for validation rules

• [ ] initialFormConfig returns form configuration
• [ ] initOrReloadVm handles create + edit modes
• [ ] validateForm() called before submit
• [ ] Async validators wrapped with ifAsyncValidator
• [ ] dependentValidations configured for cross-field rules
• [ ] FormArrays use modelItems + itemControl
• [ ] Error messages for all validation rules
• [ ] All form elements have BEM classes

• Always plan and break many small todo tasks
• Always add a final review todo task to review the works done at the end to find any fix or enhancement needed