/angular-forms

name: angular-forms
description: Build typed reactive forms with strict FormGroup typing, custom validators, and nonNullable controls in Angular. Use when implementing typed reactive forms, custom validators, or form control patterns.
metadata:
  triggers:
    keywords:
    - FormBuilder
    - FormGroup
    - FormControl
    - Validators
    - reactive forms
    - typed forms

Forms

**Priority: P2 (MEDIUM)**

1. Use Strictly Typed Reactive Forms

• Prefer Reactive Forms to Template-Driven for complex inputs.
• Define typed `FormGroup<T>` with explicit control types — never use untyped FormGroup.

See [typed forms](references/typed-forms.md) for typed FormGroup examples.

2. Extract Validation Logic

• Create standalone validator functions in separate file.
• Name the validator module as a separate file (for example, `validators.ts`) in the response and keep validation out of the component class.
• Sync `valueChanges` to stores using `takeUntilDestroyed()`.

See [typed forms](references/typed-forms.md) for standalone validator examples.

3. Ensure NonNullable Controls

• Use `fb.nonNullable.group(...)` or `nonNullable: true` on individual controls.
• This ensures form values always strings — avoids null in form values.

Anti-Patterns

• **No Template-Driven Forms**: Use Reactive Forms for any non-trivial inputs.
• **No untyped FormGroup**: Always use strictly typed `FormGroup<T>`.
• **No validation in component**: Extract into standalone validator functions.

References

• [Typed Forms](references/typed-forms.md)