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
To add validation to an Angular form, choose reactive forms for rules defined in the component or template-driven forms for rules expressed in the markup. Add built-in or custom validators to the relevant controls, then show clear error messages after the user has interacted with the form. Angular’s official guidance covers both approaches and the validation states used to manage feedback: Validate form input.
Choose reactive or template-driven forms
Both approaches support validation; the main difference is where you define and manage the form model.
| Approach | Where the model and rules live | Best fit |
|---|---|---|
| Reactive forms | The component defines the form model and validator functions. | Forms that benefit from an explicit model, direct validator functions, or room to scale as complexity grows. |
| Template-driven forms | Template directives and validation attributes define the form behavior; values can be connected with two-way binding. | Small or simple forms where expressing the setup in the template is convenient. |
Angular describes reactive forms as model-driven, explicit, and synchronously accessible, and notes that they scale more readily for complex forms. Template-driven forms can be a good choice for simpler forms. See Angular’s forms overview and reactive forms guide.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Add validation to a reactive form
Import Validators from @angular/forms and pass its validator functions when creating a control. For example, Validators.required rejects an empty value, while Validators.minLength(4) enforces a minimum length of four characters.
#1 Best Overall
import { FormControl, Validators } from '@angular/forms';
name = new FormControl('', [
Validators.required,
Validators.minLength(4),
]);Use the control’s invalid state together with dirty or touched to decide when to display feedback. Then inspect the relevant error key, such as required or minlength.
<input [formControl]="name" required>
@if (name.invalid && (name.dirty || name.touched)) {
<div>
@if (name.hasError('required')) {
<p>Enter a name.</p>
}
@if (name.hasError('minlength')) {
<p>Enter at least four characters.</p>
}
</div>
}Keep the HTML required attribute when it is appropriate for the field, including for accessibility; the Angular validator independently enforces the rule. Angular’s Validators API lists the built-in validator functions.
Write a custom synchronous validator
A reactive validator receives an AbstractControl. Return null when the value passes, or a validation-error object when it fails. The object’s key becomes available for checking in the template.
import { AbstractControl, ValidationErrors } from '@angular/forms';
function noSpaces(control: AbstractControl): ValidationErrors | null {
return control.value?.includes(' ')
? { noSpaces: true }
: null;
}To validate a relationship between fields, attach a cross-field validator to the relevant form group rather than duplicating the rule on each control. Display the group-level error after the user has interacted with the form.
Rank #3
Add validation to a template-driven form
Put built-in validation attributes such as required and minlength on the input. Angular matches these attributes to validator functions. Export ngModel to a template variable so the template can inspect the control’s state and errors.
<input
name="name"
[(ngModel)]="model.name"
required
minlength="4"
#name="ngModel"
>
@if (name.invalid && (name.dirty || name.touched)) {
<div>
@if (name.hasError('required')) {
<p>Enter a name.</p>
}
@if (name.hasError('minlength')) {
<p>Enter at least four characters.</p>
}
</div>
}For a custom template-driven rule, create a directive that provides its validator through NG_VALIDATORS. This lets Angular include the rule in the control’s validity state and expose its error to the template.
Validate values with an asynchronous check
Use an async validator when the rule depends on a check that completes later, such as a server response. It returns a Promise or Observable that resolves or emits either null for a valid value or a validation-error object. Angular runs async validators only after synchronous validators pass.
- An Observable returned by an async validator must complete.
- A control can be
pendingwhile the check runs; use that state to show that validation is in progress. - Remote checks on every keystroke can cause unnecessary requests. For the relevant control, consider
updateOn: 'blur'orupdateOn: 'submit'.
Angular’s form-validation guide documents async validation and the control states used to present it.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Change validators at runtime
If you add, replace, or clear validators dynamically, call updateValueAndValidity() so Angular recalculates the control’s validity. Angular also documents add, remove, set, and clear operations for async validators in its validation guide.
Choose when users see errors
Showing an error immediately can interrupt users before they have had a chance to enter a value. Angular’s guidance is to check whether the control is dirty or touched before displaying errors. Combine that interaction check with invalid, then show a message for the specific error key. A pending message for async checks can use the control’s pending state.
Angular and native browser validation
Angular disables native browser form validation by default by adding novalidate. To run native validation alongside Angular’s checks, add ngNativeValidate to the form. Choose deliberately: native browser feedback and Angular’s own error messages are separate mechanisms, so decide which should guide the user.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesQuick 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.
