5 - Signal Forms: The Reactive Forms of the Future

// A registration form with current Reactive Forms
@Component({
  selector: 'app-registration',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `...`
})
export class RegistrationComponent implements OnInit, OnDestroy {
  private fb = inject(FormBuilder);
  private destroy$ = new Subject<void>();

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

  // Must manually subscribe to react to changes
  ngOnInit() {
    this.form.get('password')?.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        this.form.get('confirmPassword')?.updateValueAndValidity();
      });
  }

  // Must manually manage subscription destruction
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  get nameErrors() {
    const ctrl = this.form.get('name');
    if (ctrl?.hasError('required')) return 'Name is required';
    if (ctrl?.hasError('minlength')) return 'Minimum 2 characters';
    return '';
  }
}
    

// The same registration form with Signal Forms
@Component({
  selector: 'app-registration',
  standalone: true,
  template: `...`
})
export class RegistrationComponent {
  // Concise declaration with inline validation
  name = formSignal('', {
    validators: [required(), minLength(2)]
  });

  email = formSignal('', {
    validators: [required(), email()]
  });

  password = formSignal('', {
    validators: [required(), minLength(8)]
  });

  confirmPassword = formSignal('', {
    validators: [required(), matchesField(this.password)]
  });

  address = formRecord({
    street: formSignal(''),
    city: formSignal('', { validators: [required()] }),
    zip: formSignal('', { validators: [pattern(/^\d{5}$/)] })
  });

  // State is derived automatically, no subscriptions
  isFormValid = computed(() =>
    this.name.isValid() &&
    this.email.isValid() &&
    this.password.isValid() &&
    this.confirmPassword.isValid() &&
    this.address.isValid()
  );

  // No ngOnInit, no ngOnDestroy, no Subject
}
    

const username = formSignal('', {
  validators: [required(), minLength(3), maxLength(20)]
});

// Current value: WritableSignal<string>
console.log(username.value());  // ''

// Validation state: Signal<boolean>
console.log(username.isValid());    // false
console.log(username.isInvalid());  // true

// Validation errors: Signal<ValidationErrors | null>
console.log(username.errors());  // { required: true }

// Interaction state: Signal<boolean>
console.log(username.isDirty());     // false
console.log(username.isPristine());  // true
console.log(username.isTouched());   // false
console.log(username.isUntouched()); // true

// Pending state (async validation): Signal<boolean>
console.log(username.isPending());  // false

// Disabled state: Signal<boolean>
console.log(username.isDisabled()); // false
console.log(username.isEnabled());  // true

// Programmatic value update
username.value.set('angular_dev');
// Now: isValid() === true, isDirty() === true, errors() === null

// Mark as touched (e.g., on blur)
username.markAsTouched();
// Now: isTouched() === true
    

// Built-in validators
const email = formSignal('', {
  validators: [
    required(),              // Cannot be empty
    email(),                 // Must be a valid email
    maxLength(100)           // Maximum 100 characters
  ]
});

// Custom validator: pure function
function strongPassword(): ValidatorFn {
  return (value: string) => {
    const hasUpperCase = /[A-Z]/.test(value);
    const hasLowerCase = /[a-z]/.test(value);
    const hasDigit = /\d/.test(value);
    const hasSpecial = /[!@#$%^&*]/.test(value);

    if (hasUpperCase && hasLowerCase && hasDigit && hasSpecial) {
      return null; // Valid
    }

    return {
      strongPassword: {
        hasUpperCase,
        hasLowerCase,
        hasDigit,
        hasSpecial,
        message: 'Password must contain uppercase, lowercase, numbers and special characters'
      }
    };
  };
}

const password = formSignal('', {
  validators: [required(), minLength(8), strongPassword()]
});

// Reactive access to specific errors
const passwordErrors = computed(() => {
  const errs = password.errors();
  if (!errs) return [];
  const messages: string[] = [];
  if (errs['required']) messages.push('Password is required');
  if (errs['minlength']) messages.push('Minimum 8 characters');
  if (errs['strongPassword']) messages.push(errs['strongPassword'].message);
  return messages;
});
    

// Async validator: check if username is available
function usernameAvailable(userService: UserService): AsyncValidatorFn {
  return async (value: string) => {
    if (value.length < 3) return null; // Too short, skip check

    const exists = await userService.checkUsername(value);
    return exists
      ? { usernameTaken: { message: `Username "${value}" is already taken` } }
      : null;
  };
}

@Component({
  selector: 'app-signup',
  standalone: true,
  template: `
    <label>Username</label>
    <input [formSignal]="username" />

    @if (username.isPending()) {
      <span class="checking">Checking availability...</span>
    }
    @if (username.errors()?.['usernameTaken']; as err) {
      <span class="error">{{ err.message }}</span>
    }
  `
})
export class SignupComponent {
  private userService = inject(UserService);

  username = formSignal('', {
    validators: [required(), minLength(3)],
    asyncValidators: [usernameAvailable(this.userService)],
    asyncDebounceMs: 300  // Built-in debounce!
  });
}
    

// Complete form with nested groups
const profileForm = formRecord({
  personalInfo: formRecord({
    firstName: formSignal('', { validators: [required()] }),
    lastName: formSignal('', { validators: [required()] }),
    birthDate: formSignal<Date | null>(null)
  }),

  contactInfo: formRecord({
    email: formSignal('', { validators: [required(), email()] }),
    phone: formSignal('', { validators: [pattern(/^\+?\d{10,15}$/)] })
  }),

  preferences: formRecord({
    newsletter: formSignal(false),
    theme: formSignal<'light' | 'dark'>('dark'),
    language: formSignal('en')
  }),

  // FormList for multiple addresses
  addresses: formList([
    formRecord({
      type: formSignal<'home' | 'work'>('home'),
      street: formSignal('', { validators: [required()] }),
      city: formSignal('', { validators: [required()] }),
      zip: formSignal('', { validators: [required()] })
    })
  ])
});

// State propagates automatically upward
const isProfileValid = profileForm.isValid();
// true only if ALL fields in ALL groups are valid

const isDirty = profileForm.isDirty();
// true if ANY field in any group has been modified

// Access the complete value as a typed object
const formValue = profileForm.value();
// Type inferred automatically:
// {
//   personalInfo: { firstName: string; lastName: string; birthDate: Date | null }
//   contactInfo: { email: string; phone: string }
//   preferences: { newsletter: boolean; theme: 'light' | 'dark'; language: string }
//   addresses: Array<{ type: 'home' | 'work'; street: string; city: string; zip: string }>
// }

// Add an address to the list
profileForm.controls.addresses.push(
  formRecord({
    type: formSignal<'home' | 'work'>('work'),
    street: formSignal('', { validators: [required()] }),
    city: formSignal('', { validators: [required()] }),
    zip: formSignal('', { validators: [required()] })
  })
);
    

// Custom input component with model()
@Component({
  selector: 'app-text-input',
  standalone: true,
  template: `
    <div class="input-wrapper" [class.invalid]="hasError()">
      <label>{{ label() }}</label>
      <input
        [value]="value()"
        (input)="onInput($event)"
        (blur)="onBlur()"
        [placeholder]="placeholder()"
      />
      @if (hasError() && isTouched()) {
        <span class="error-message">{{ errorMessage() }}</span>
      }
    </div>
  `
})
export class TextInputComponent {
  // Two-way binding with parent component
  value = model<string>('');
  label = input<string>('');
  placeholder = input<string>('');
  hasError = input<boolean>(false);
  isTouched = input<boolean>(false);
  errorMessage = input<string>('');

  onInput(event: Event) {
    const target = event.target as HTMLInputElement;
    this.value.set(target.value);
  }

  onBlur() {
    // Notify parent that the field was touched
  }
}

// Usage in parent component with Signal Forms
@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [TextInputComponent],
  template: `
    <form (ngSubmit)="submit()">
      <app-text-input
        [(value)]="name.value"
        [label]="'Full Name'"
        [hasError]="name.isInvalid()"
        [isTouched]="name.isTouched()"
        [errorMessage]="nameError()"
      />

      <app-text-input
        [(value)]="email.value"
        [label]="'Email'"
        [hasError]="email.isInvalid()"
        [isTouched]="email.isTouched()"
        [errorMessage]="emailError()"
      />

      <button [disabled]="!isFormValid()">Submit</button>
    </form>
  `
})
export class ContactFormComponent {
  name = formSignal('', { validators: [required()] });
  email = formSignal('', { validators: [required(), email()] });

  nameError = computed(() => {
    if (this.name.errors()?.['required']) return 'Name is required';
    return '';
  });

  emailError = computed(() => {
    if (this.email.errors()?.['required']) return 'Email is required';
    if (this.email.errors()?.['email']) return 'Invalid email address';
    return '';
  });

  isFormValid = computed(() =>
    this.name.isValid() && this.email.isValid()
  );

  submit() {
    console.log({ name: this.name.value(), email: this.email.value() });
  }
}
    

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <input [formControl]="searchControl" placeholder="Search..." />

    @if (isSearching()) {
      <span class="spinner">Searching...</span>
    }

    @if (hasResults()) {
      <p>Found {{ resultCount() }} results for "{{ searchTerm() }}"</p>
    }

    @for (result of results(); track result.id) {
      <app-result-card [result]="result" />
    } @empty {
      @if (searchTerm().length > 0) {
        <p>No results for "{{ searchTerm() }}"</p>
      }
    }
  `
})
export class SearchComponent {
  private searchService = inject(SearchService);

  searchControl = new FormControl('', { nonNullable: true });

  // Convert valueChanges to Signal
  searchTerm = toSignal(
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged()
    ),
    { initialValue: '' }
  );

  // Derived state with computed
  private searchResult = toSignal(
    toObservable(this.searchTerm).pipe(
      switchMap(term =>
        term.length > 2
          ? this.searchService.search(term)
          : of({ items: [], total: 0 })
      )
    ),
    { initialValue: { items: [], total: 0 } }
  );

  results = computed(() => this.searchResult().items);
  resultCount = computed(() => this.searchResult().total);
  hasResults = computed(() => this.resultCount() > 0);
  isSearching = signal(false);
}
    

// Current CVA improved with Signals
@Component({
  selector: 'app-star-rating',
  standalone: true,
  template: `
    <div class="star-rating" [class.disabled]="isDisabled()">
      @for (star of stars(); track star) {
        <button
          class="star"
          [class.filled]="star <= currentValue()"
          [class.hovered]="star <= hoveredStar()"
          (mouseenter)="hoveredStar.set(star)"
          (mouseleave)="hoveredStar.set(0)"
          (click)="selectRating(star)"
          [disabled]="isDisabled()">
          ★
        </button>
      }
      <span class="label">{{ currentValue() }} / {{ maxStars() }}</span>
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StarRatingComponent),
      multi: true
    }
  ]
})
export class StarRatingComponent implements ControlValueAccessor {
  maxStars = input(5);
  currentValue = signal(0);
  hoveredStar = signal(0);
  isDisabled = signal(false);

  stars = computed(() =>
    Array.from({ length: this.maxStars() }, (_, i) => i + 1)
  );

  private onChange: (value: number) => void = () => {};
  private onTouched: () => void = () => {};

  writeValue(value: number): void {
    this.currentValue.set(value || 0);
  }

  registerOnChange(fn: (value: number) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled.set(isDisabled);
  }

  selectRating(star: number): void {
    if (this.isDisabled()) return;
    this.currentValue.set(star);
    this.onChange(star);
    this.onTouched();
  }
}
    

// Future: no ControlValueAccessor, no provider
@Component({
  selector: 'app-star-rating',
  standalone: true,
  template: `
    <div class="star-rating">
      @for (star of stars(); track star) {
        <button
          class="star"
          [class.filled]="star <= value()"
          (click)="value.set(star)">
          ★
        </button>
      }
    </div>
  `
})
export class StarRatingComponent {
  // model() handles everything: two-way binding, notifications, state
  value = model(0);
  maxStars = input(5);

  stars = computed(() =>
    Array.from({ length: this.maxStars() }, (_, i) => i + 1)
  );
  // Done. No CVA, no provider, no callbacks.
}

// In the parent:
// <app-star-rating [(value)]="rating.value" />
    

// Service that isolates form logic
// Today: uses Reactive Forms internally, exposes Signals
// Tomorrow: replace implementation with Signal Forms

@Injectable({ providedIn: 'root' })
export class ProfileFormService {
  private fb = inject(FormBuilder);

  // Internal implementation with Reactive Forms
  private _form = this.fb.nonNullable.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    bio: ['', Validators.maxLength(500)]
  });

  // Public API based on Signals
  readonly name = toSignal(
    this._form.controls.name.valueChanges,
    { initialValue: '' }
  );

  readonly email = toSignal(
    this._form.controls.email.valueChanges,
    { initialValue: '' }
  );

  readonly isValid = toSignal(
    this._form.statusChanges.pipe(map(s => s === 'VALID')),
    { initialValue: false }
  );

  readonly isDirty = toSignal(
    this._form.valueChanges.pipe(map(() => this._form.dirty)),
    { initialValue: false }
  );

  // Public methods that remain unchanged after migration
  setValues(data: Partial<ProfileData>) {
    this._form.patchValue(data);
  }

  getValues(): ProfileData {
    return this._form.getRawValue();
  }

  reset() {
    this._form.reset();
  }
}