Reactive forms keep controls and validation rules in an explicit form model. A group validator is useful when validity depends on a relationship between fields rather than one field alone.

This Angular interview exercise uses a fictional booking date range. The fields hold simple day numbers to focus on validation. Real dates need an agreed format, time zone and business calendar; this snippet does not solve those concerns.

Where does a cross-field rule belong?

import {
  AbstractControl, FormControl, FormGroup,
  ValidationErrors, Validators
} from '@angular/forms';

function orderedDays(group: AbstractControl): ValidationErrors | null {
  const start = group.get('start')?.value;
  const end = group.get('end')?.value;
  if (typeof start !== 'number' || typeof end !== 'number') return null;
  return end >= start ? null : { dayOrder: true };
}

const booking = new FormGroup({
  start: new FormControl<number | null>(null, [Validators.required]),
  end: new FormControl<number | null>(null, [Validators.required])
}, { validators: orderedDays });

booking.setValue({ start: 10, end: 12 });
if (!booking.valid) throw new Error('Expected a valid range');
booking.controls.end.setValue(9);
if (!booking.hasError('dayOrder')) throw new Error('Expected range error');

Required validators handle missing values on each control. The group validator handles the relationship. It returns an error object instead of changing another control's errors as a side effect, which keeps ownership clearer.

When should an error be shown?

A form can be invalid before the user interacts with it. That does not mean the interface should immediately display every error. A common approach shows an error after the relevant control is touched or after a submit attempt.

Associate the explanation with the control or group using accessible markup. For this rule, “End day must be the same as or later than start day” tells the reader how to recover. “Invalid form” does not.

What is the difference between setValue and patchValue?

SetValue expects the full structure for the group. PatchValue can update a subset. Choose based on intent. Using patchValue everywhere can conceal a misspelled field or a missing part of an expected complete response.

Keep API mapping explicit. A server object can contain fields the form should never accept, such as ownership or approval status. Do not treat copying an arbitrary response into the form as a safe authorization design.

How does pending validation affect submit?

Asynchronous validation can place a control in a pending state. Decide how the submit action handles pending work, disabled fields and the final server response. The server must still validate the request independently.

Disabled controls are excluded from a group's ordinary value. GetRawValue includes disabled controls. Choose deliberately when building a request; including a disabled control does not make its value trusted.

Which checks matter?

  • Missing start and end values fail their required rules.
  • An ordered range passes.
  • An earlier end produces the group error.
  • Correcting the end removes that group error.
  • Interaction shows a useful message at the intended time.
  • A rejected server request preserves the user's correctable input.

The model checks can be small unit tests. Rendering and error associations need component tests. Avoid claiming that a model-only test proves keyboard interaction or screen-reader behavior.

Explain the design

Name which rules belong to a control, which belong to the group and which require the server. Then show one invalid-to-valid transition. That gives an interviewer concrete evidence of how you would build and debug a real form.

References and next practice

angular.dev — ng forms

angular question collection · Browse interview topics · Practise a question in Interview Challenge · How to Answer Technical Interview Questions Out Loud