RequiredWhen

RequiredWhen is a custom validation strategy used in Angular reactive and template‑driven forms to conditionally mark a form control as required based on the value of another control or a set of controls in the same form group. The directive or custom validator monitors the dependent control(s) and applies the required validator only when a specified condition is met, thereby enabling dynamic form validation rules that respond to user input.

In a reactive form, the RequiredWhen validator can be implemented as a factory function that receives the dependent control name(s) and a test function. When the condition function returns true, the validator applies the built‑in Validators.required validator to the target control; otherwise, it returns null to allow the control to be optional. The validator is typically added to the form control via the form builder: myControl: [null, requiredWhen('dependentControl', value => value === 'yes')] This approach ensures that validation runs on value changes and the UI updates accordingly.

In template‑driven forms, the same concept is achieved by adding a [requiredWhen] directive to the input element and binding it to the target condition: <input name="target" ngModel requiredWhen="dependentControl" [requiredWhenCondition]="value => value === 'yes'"> The directive internally registers a validator with the control’s NgModel and updates the required state when the dependent control changes.

Documentation for both approaches includes examples of handling multiple dependencies, synchronous and asynchronous validation, and integration with form validation feedback mechanisms such as CSS classes or error messages. Developers should note that RequiredWhen is not part of the official Angular API; it is typically provided by community libraries such as ngx‑validators or custom implementation. Its use improves user experience by showing validation messages only when the context demands a value, reducing unnecessary errors on dependent fields.