Angular Form Development Workflow

Use when creating/modifying reactive forms with validation, async validators, dependent validation, or FormArrays.

Decision Tree

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

Workflow

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

Key Rules

• 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

File Location

src/Frontend/apps/{app-name}/src/app/features/{feature}/
├── {feature}-form.component.ts|html|scss

⚠️ MUST READ Before Implementation

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

Anti-Patterns

• 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

Verification Checklist

• 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

IMPORTANT Task Planning Notes

• 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