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