Angular Forms Skill

Rules

Form Creation

• Use ReactiveFormsModule for reactive forms
• Use FormControl for individual form fields
• Use FormGroup to group multiple form controls
• Use FormArray for dynamic lists of form controls
• Use FormBuilder for simplified form creation

Validation

• Use built-in validators: Validators.required, Validators.email, Validators.min, Validators.max, Validators.pattern
• Custom validators MUST return ValidationErrors | null
• Show validation errors ONLY after field is touched
• Disable submit button when form is invalid

Form State Management

• Check form state: valid, invalid, touched, dirty, pristine
• Reset form using form.reset()
• Update form values using form.patchValue() or form.setValue()

NgRx Signals Integration

• Store form instance in signalStore state
• Use rxMethod for async form submission
• Use tapResponse for handling submission success/error
• Reset form on successful submission

Form Submission

• Use (ngSubmit) event for form submission
• Validate form before processing: if (form.valid)
• Handle errors with user feedback

---

Context

Summary

Angular Reactive Forms provide a model-driven approach to handling form inputs with built-in validation, state management, and integration with Angular's reactive programming patterns.

When to Use This Skill

Activate this skill when you need to:

• Create reactive forms with FormControl and FormGroup
• Implement built-in and custom validators
• Handle form submissions and data binding
• Build dynamic forms with FormArray
• Implement cross-field validation
• Integrate forms with NgRx Signals stores
• Handle async validators
• Implement form state management (touched, dirty, valid)
• Create reusable form components

Basic Reactive Form Example

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name">
      @if (userForm.controls.name.touched && userForm.controls.name.errors) {
        <span>Name is required</span>
      }

      <input formControlName="email" type="email" placeholder="Email">
      @if (userForm.controls.email.touched && userForm.controls.email.errors?.['email']) {
        <span>Invalid email</span>
      }

      <button type="submit" [disabled]="userForm.invalid">Submit</button>
    </form>
  `
})
export class UserFormComponent {
  userForm = new FormGroup({
    name: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email])
  });

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

Custom Validators Example

// Custom validator function
function minAgeValidator(minAge: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (!control.value) return null;

    const birthDate = new Date(control.value);
    const age = new Date().getFullYear() - birthDate.getFullYear();

    return age >= minAge ? null : { minAge: { required: minAge, actual: age } };
  };
}

// Usage
age: new FormControl('', [Validators.required, minAgeValidator(18)])

Integration with NgRx Signals Example

export const UserFormStore = signalStore(
  { providedIn: 'root' },
  withState({
    form: new FormGroup({
      name: new FormControl(''),
      email: new FormControl('')
    }),
    submitting: false,
    error: null as string | null
  }),
  withMethods((store, userService = inject(UserService)) => ({
    submitForm: rxMethod<void>(
      pipe(
        tap(() => patchState(store, { submitting: true })),
        switchMap(() => userService.createUser(store.form().value)),
        tapResponse({
          next: () => {
            store.form().reset();
            patchState(store, { submitting: false });
          },
          error: (error: Error) => patchState(store, { 
            error: error.message, 
            submitting: false 
          })
        })
      )
    )
  }))
);

References

• Angular Forms Documentation
• Form Validation