Observing Form State and Submitting

Form controls expose state flags that drive when and how validation messages appear.

State Flags

const control = this.form.get('email');

control?.valid;       // All validators pass
control?.invalid;     // At least one validator fails
control?.dirty;       // User has changed the value
control?.pristine;    // User has NOT changed the value
control?.touched;     // User has focused and blurred the field
control?.untouched;   // User has NOT focused the field
control?.pending;     // Async validators are running
control?.errors;      // { required: true, ... } or null
control?.value;       // Current value
control?.status;      // 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'

Using Flags for Validation Messages

<form [formGroup]="form">
  <label>
    Email
    <input type="email" formControlName="email">
  </label>

  <!-- Show error only after user interaction -->
  @if (form.get('email')?.invalid && form.get('email')?.touched) {
    <p class="error">Please enter a valid email</p>
  }

  <!-- Show success indicator -->
  @if (form.get('email')?.valid && form.get('email')?.dirty) {
    <p class="success">Looks good!</p>
  }
</form>

markAllAsTouched

When submitting an invalid form, mark all controls as touched to reveal all errors:

onSubmit(): void {
  if (this.form.invalid) {
    this.form.markAllAsTouched();
    return;
  }
  // Process valid form
  console.log('Form value:', this.form.value);
}

Disabling Submit Button

<button type="submit" [disabled]="form.invalid || form.pending">
  Submit
</button>

FormGroup and FormControl expose Observables that emit on every value or status change.

valueChanges Observable

@Component({
  selector: 'app-search',
  template: `
    <input formControlName="query" placeholder="Search...">
    <p *ngIf="results$ | async as results">
      {{ results.length }} results found
    </p>
  `,
})
export class SearchComponent implements OnInit, OnDestroy {
  private fb = inject(FormBuilder);
  private searchService = inject(SearchService);
  private destroy$ = new Subject<void>();

  form = this.fb.group({
    query: [''],
  });

  results$: Observable<SearchResult[]> = this.form.get('query')!.valueChanges.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(query => this.searchService.search(query)),
    takeUntil(this.destroy$)
  );

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

statusChanges Observable

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

Autosave Pattern

@Component({
  selector: 'app-profile-editor',
  template: `...`,
})
export class ProfileEditorComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.form.valueChanges.pipe(
      debounceTime(1000),
      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
      takeUntil(this.destroy$)
    ).subscribe(values => {
      this.saveToServer(values);
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

setValue vs patchValue

// setValue — must provide ALL controls
this.form.setValue({
  email: 'test@example.com',
  password: 'secret123',
});

// patchValue — only update specified controls
this.form.patchValue({
  email: 'new@example.com',
});