Angular forms

Forms

Priority: P2 (MEDIUM)

Principles

• Reactive Forms: Always use Reactive Forms (FormControl, FormGroup) over Template-Driven Forms for complex inputs. Template-driven forms are only acceptable for very simple, single-field cases. Reactive forms are strictly typed, testable, and compose better with Signal stores.
• Strict Typing: Use strictly typed forms using FormGroup<T> with a typed interface: FormGroup<{ email: FormControl<string>; password: FormControl<string> }>. Never use untyped FormGroup.
• Non-Nullable: Use fb.nonNullable.group({ email: ['', Validators.email], password: [''] }) or nonNullable: true on individual FormControl for fine-grained control. This ensures form values are always strings — Avoid null in form values by using fb.nonNullable.group.

Guidelines

• Component Store integration: Sync valueChanges using takeUntilDestroyed() to call store.update().
• Split Logic: Logic for validation should be in custom validator functions (e.g., function passwordStrength(control: AbstractControl): ValidationErrors | null). Extract validation into a separate file — do not put validation logic inside the component class.

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 validation into standalone validator functions. Inject FormBuilder with fb = inject(FormBuilder).

References

• Typed Forms