NGRX-Playground/.agents/skills/angular-forms/references/form-patterns.md

Angular Form Patterns

Table of Contents

• Reactive Forms (Production-Stable)
• Typed Reactive Forms
• FormBuilder Patterns
• Dynamic Forms with FormArray
• Custom Validators
• Form State Management

Reactive Forms (Production-Stable)

For production applications requiring stability guarantees, use Reactive Forms:

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'app-login',
    imports: [ReactiveFormsModule],
    template: `
        <form
            [formGroup]="form"
            (ngSubmit)="onSubmit()">
            <input formControlName="email" />
            @if (form.controls.email.errors?.['required'] && form.controls.email.touched) {
                <span class="error">Email is required</span>
            }

            <input
                type="password"
                formControlName="password" />

            <button
                type="submit"
                [disabled]="form.invalid">
                Login
            </button>
        </form>
    `,
})
export class Login {
    private fb = inject(FormBuilder);

    form = this.fb.group({
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(8)]],
    });

    onSubmit() {
        if (this.form.valid) {
            console.log(this.form.value);
        }
    }
}

Typed Reactive Forms

Typed FormControl

import { FormControl } from '@angular/forms';

// Inferred type: FormControl<string | null>
const name = new FormControl('');

// Non-nullable (no reset to null)
const email = new FormControl('', { nonNullable: true });
// Type: FormControl<string>

// With validators
const username = new FormControl('', {
    nonNullable: true,
    validators: [Validators.required, Validators.minLength(3)],
});

Typed FormGroup

import { FormGroup, FormControl } from '@angular/forms';

interface UserForm {
    name: FormControl<string>;
    email: FormControl<string>;
    age: FormControl<number | null>;
}

const form = new FormGroup<UserForm>({
    name: new FormControl('', { nonNullable: true }),
    email: new FormControl('', { nonNullable: true }),
    age: new FormControl<number | null>(null),
});

// Typed value access
const name: string = form.controls.name.value;

NonNullableFormBuilder

import { inject } from '@angular/core';
import { NonNullableFormBuilder } from '@angular/forms';

@Component({...})
export class Profile {
  private fb = inject(NonNullableFormBuilder);

  form = this.fb.group({
    name: ['', Validators.required],           // FormControl<string>
    email: ['', [Validators.required, Validators.email]],
    preferences: this.fb.group({
      newsletter: [false],                      // FormControl<boolean>
      theme: ['light' as 'light' | 'dark'],    // FormControl<'light' | 'dark'>
    }),
  });
}

FormBuilder Patterns

Nested FormGroups

@Component({
    imports: [ReactiveFormsModule],
    template: `
        <form
            [formGroup]="form"
            (ngSubmit)="onSubmit()">
            <input
                formControlName="name"
                placeholder="Name" />

            <div formGroupName="address">
                <input
                    formControlName="street"
                    placeholder="Street" />
                <input
                    formControlName="city"
                    placeholder="City" />
                <input
                    formControlName="zip"
                    placeholder="ZIP" />
            </div>

            <button type="submit">Submit</button>
        </form>
    `,
})
export class Profile {
    private fb = inject(NonNullableFormBuilder);

    form = this.fb.group({
        name: ['', Validators.required],
        address: this.fb.group({
            street: [''],
            city: ['', Validators.required],
            zip: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]],
        }),
    });
}

Dynamic Forms with FormArray

import { FormArray } from '@angular/forms';

@Component({
    imports: [ReactiveFormsModule],
    template: `
        <form [formGroup]="form">
            <div formArrayName="items">
                @for (item of items.controls; track $index; let i = $index) {
                    <div [formGroupName]="i">
                        <input
                            formControlName="product"
                            placeholder="Product" />
                        <input
                            formControlName="quantity"
                            type="number" />
                        <button
                            type="button"
                            (click)="removeItem(i)">
                            Remove
                        </button>
                    </div>
                }
            </div>
            <button
                type="button"
                (click)="addItem()">
                Add Item
            </button>
        </form>
    `,
})
export class Order {
    private fb = inject(NonNullableFormBuilder);

    form = this.fb.group({
        items: this.fb.array([this.createItem()]),
    });

    get items() {
        return this.form.controls.items;
    }

    createItem() {
        return this.fb.group({
            product: ['', Validators.required],
            quantity: [1, [Validators.required, Validators.min(1)]],
        });
    }

    addItem() {
        this.items.push(this.createItem());
    }

    removeItem(index: number) {
        this.items.removeAt(index);
    }
}

Custom Validators

Sync Validator

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function forbiddenValue(forbidden: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    return control.value === forbidden
      ? { forbiddenValue: { value: control.value } }
      : null;
  };
}

// Usage
name: ['', [Validators.required, forbiddenValue('admin')]],

Cross-Field Validator

export function passwordMatch(): ValidatorFn {
    return (group: AbstractControl): ValidationErrors | null => {
        const password = group.get('password')?.value;
        const confirm = group.get('confirmPassword')?.value;
        return password === confirm ? null : { passwordMismatch: true };
    };
}

// Usage
form = this.fb.group(
    {
        password: ['', [Validators.required, Validators.minLength(8)]],
        confirmPassword: ['', Validators.required],
    },
    { validators: passwordMatch() },
);

Async Validator

import { AsyncValidatorFn } from '@angular/forms';
import { map, catchError, of } from 'rxjs';

export function uniqueEmail(userService: User): AsyncValidatorFn {
  return (control: AbstractControl) => {
    return userService.checkEmail(control.value).pipe(
      map(exists => exists ? { emailTaken: true } : null),
      catchError(() => of(null))
    );
  };
}

// Usage
email: ['',
  [Validators.required, Validators.email],  // sync validators
  [uniqueEmail(this.userService)]            // async validators
],

Form State Management

State Properties

// Check states
form.valid; // All validations pass
form.invalid; // Has validation errors
form.pending; // Async validation in progress
form.dirty; // Value changed by user
form.pristine; // Value not changed
form.touched; // Control has been focused
form.untouched; // Control never focused

// Update values
form.setValue({ name: 'John', email: 'john@example.com' }); // Must include all
form.patchValue({ name: 'John' }); // Partial update

// Reset
form.reset();
form.reset({ name: 'Default' });

// Disable/Enable
form.disable();
form.enable();
form.controls.email.disable();

// Mark states
form.markAllAsTouched(); // Show all errors
form.markAsPristine();
form.markAsDirty();

Value Changes Observable

// Subscribe to value changes
form.valueChanges.subscribe((value) => {
    console.log('Form value:', value);
});

// Single control with debounce
form.controls.email.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((email) => {
    this.validateEmail(email);
});

// Status changes
form.statusChanges.subscribe((status) => {
    console.log('Form status:', status); // VALID, INVALID, PENDING
});

Unified Events (Angular v18+)

import {
    ValueChangeEvent,
    StatusChangeEvent,
    PristineChangeEvent,
    TouchedChangeEvent,
    FormSubmittedEvent,
    FormResetEvent,
} from '@angular/forms';

form.events.subscribe((event) => {
    if (event instanceof ValueChangeEvent) {
        console.log('Value changed:', event.value);
    }
    if (event instanceof StatusChangeEvent) {
        console.log('Status changed:', event.status);
    }
    if (event instanceof PristineChangeEvent) {
        console.log('Pristine changed:', event.pristine);
    }
    if (event instanceof TouchedChangeEvent) {
        console.log('Touched changed:', event.touched);
    }
    if (event instanceof FormSubmittedEvent) {
        console.log('Form submitted');
    }
    if (event instanceof FormResetEvent) {
        console.log('Form reset');
    }
});

Error Display Pattern

@Component({
    template: `
        <input formControlName="email" />

        @if (form.controls.email.invalid && form.controls.email.touched) {
            <div class="errors">
                @if (form.controls.email.errors?.['required']) {
                    <span>Email is required</span>
                }
                @if (form.controls.email.errors?.['email']) {
                    <span>Invalid email format</span>
                }
            </div>
        }
    `,
})
export class Form {
    // Helper for cleaner templates
    hasError(controlName: string, errorKey: string): boolean {
        const control = this.form.get(controlName);
        return (control?.hasError(errorKey) && control?.touched) || false;
    }
}

Form Submission Pattern

@Component({
    template: `
        <form
            [formGroup]="form"
            (ngSubmit)="onSubmit()">
            <!-- fields -->
            <button
                type="submit"
                [disabled]="form.invalid || isSubmitting">
                {{ isSubmitting ? 'Submitting...' : 'Submit' }}
            </button>
        </form>
    `,
})
export class Form {
    isSubmitting = false;

    async onSubmit() {
        if (this.form.invalid) {
            this.form.markAllAsTouched();
            return;
        }

        this.isSubmitting = true;
        try {
            await this.api.submit(this.form.getRawValue());
            this.form.reset();
        } catch (error) {
            // Handle error
        } finally {
            this.isSubmitting = false;
        }
    }
}