Sign in
Skip to solution
mediumFrontend

How do you handle dynamic validation where one form field's validator depends on another field's value?

808 views
01

Understand the problem

Show how to dynamically add or remove form validators based on model state changes.

formsvalidation
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Subscribe to the source control's valueChanges. On emit, add/remove validators from the target control using .setValidators(...) or .clearValidators(), then call .updateValueAndValidity() to trigger validation reconciliation.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Dynamic validation setup inside component constructor
import { Component, OnInit, inject } from '@angular/core';
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-booking',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: '...'
})
export class BookingComponent implements OnInit {
  private fb = inject(FormBuilder);
  
  form = this.fb.group({
    method: ['email'],
    email: ['', Validators.email],
    phone: ['']
  });

  ngOnInit() {
    this.form.get('method')?.valueChanges.subscribe(method => {
      const emailCtrl = this.form.get('email');
      const phoneCtrl = this.form.get('phone');

      if (method === 'phone') {
        phoneCtrl?.setValidators([Validators.required]);
        emailCtrl?.clearValidators();
      } else {
        emailCtrl?.setValidators([Validators.required, Validators.email]);
        phoneCtrl?.clearValidators();
      }

      phoneCtrl?.updateValueAndValidity();
      emailCtrl?.updateValueAndValidity();
    });
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 32 of 121 decoded in the Angular track. One more won't hurt.

Back to track