Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
For reactive forms, attach a custom validator to the nearest FormGroup containing the fields it needs to compare. The validator reads those child controls and returns either a named error object or null. Display that group-level error from the form template. Template-driven forms use a validator directive registered with NG_VALIDATORS.
What cross-field validation checks
A cross-field validator compares values from different fields and accepts or rejects them as a combination. It is useful when each value might be valid on its own, but the relationship between them must meet a rule—for example, two sibling fields that cannot contain the same value.
Reactive forms: put the validator on the shared FormGroup
When the fields are siblings, attach the validator to their common FormGroup. The validator receives the group, retrieves its child controls with get(), and returns a validation error when the rule fails.
Angular’s official example uses name and role controls and reports an error when their values match. The same pattern looks like this:
#1 Best Overall
const actorForm = new FormGroup({
name: new FormControl(''),
role: new FormControl(''),
}, { validators: unambiguousRoleValidator });
function unambiguousRoleValidator(group: AbstractControl): ValidationErrors | null {
const name = group.get('name');
const role = group.get('role');
if (!name || !role) {
return null;
}
return name.value === role.value ? { unambiguousRole: true } : null;
}This example uses Angular’s documented validator shape; import the form classes and types used by the project from Angular’s forms package. The official guide shows the group configured with the validator in its options object. Angular’s cross-field validation guide has the complete example.
Return the error at the group level
A synchronous validator returns null when the rule passes, or a ValidationErrors object with a meaningful key when it fails. In the example, the group owns the unambiguousRole error. Keep that ownership: avoid changing child control errors from inside the validator as a shortcut. Place the error message where it makes sense for the combined fields, and check the group for the error.
Show the group error in the template
Because the validator is attached to the group, check hasError() on that group, not on either individual control. Angular’s example also waits until the group is touched or dirty before showing its message:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute<div *ngIf="actorForm.hasError('unambiguousRole') && (actorForm.touched || actorForm.dirty)">
Name and role cannot match.
</div>That condition avoids showing the cross-field message before the user has interacted with the form.
Rank #3
Nested and configurable groups
If the fields are siblings inside a nested form, attach the validator to the nested group that is their nearest common ancestor. A validator can be supplied directly or as part of an array; a FormGroup options object can also specify validators and when validation runs. See the FormGroup API reference for the group configuration options.
Template-driven forms: register a validator directive
Template-driven forms do not attach the validator function to a component-defined reactive form model. Instead, create a directive that wraps the validator function and register the directive with NG_VALIDATORS. Angular documents this approach in its form validation guide. Choose between the approaches based on how the form is built: reactive forms declare validation in the form model, while template-driven forms register it through a directive.
When the rule needs asynchronous work
Use a synchronous validator for a comparison that can be evaluated from the current form values. Angular runs asynchronous validators only after synchronous validators pass; each asynchronous validator must complete before Angular sets its errors. An asynchronous validator returns a Promise or Observable that emits either an error map or null. The Angular validation guide describes both validator types.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
