Angular: Unified Control State Change Events

control-state-change-events.ts

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

export class ProfileFormComponent {
  private fb = inject(FormBuilder);

  profileForm: FormGroup;

  ngOnInit() {
    this.profileForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.minLength(2)]],
      lastName: ['', Validators.required, Validators.minLength(2)],
      age: ['', [Validators.required, Validators.min(18)]]
    });

    this.profileForm.controls['firstName'].events.subscribe((event) => {
      if(event instanceof StatusEvent) {
        console.log(event.status);
      }
      if(event instanceof PristineEvent) {
        console.log(event.pristine);
      }
      if(event instanceof TouchedEvent) {
        console.log(event.touched);
      }
      if(event instanceof ValueChangeEvent) {
        console.log(event.value);
      }
    });
  }
}