What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To validate an Angular form, choose reactive forms or template-driven forms, add validators to the controls, and show errors after the user has interacted with the form. Reactive forms define the model and validator functions in the component; template-driven forms use directives and validation attributes in the template.
Choose reactive or template-driven forms
| Approach | Where validation is defined | Best fit |
|---|---|---|
| Reactive forms | In the component’s form model, using validator functions | Forms that need an explicit model, direct access to state, or room to scale |
| Template-driven forms | In the template, using directives and validation attributes | Small or simple forms where template-based binding is sufficient |
Angular describes reactive forms as explicit and model-driven, while template-driven forms rely on directives and two-way binding. See Angular’s forms overview and reactive forms guide. The examples below use APIs documented by Angular; check them against the version installed in your project.
As an Amazon Associate I earn from qualifying purchases.
Add validation to a reactive form
Import Validators from @angular/forms and pass validator functions when you create a control. For example, require a value and set a minimum length:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteimport { FormControl, Validators } from '@angular/forms';
name = new FormControl('', [Validators.required, Validators.minLength(4)]);Keep the HTML required attribute on the input when appropriate for accessibility. The Angular validator applies form validation; the attribute also communicates that the field is required in the markup.
#1 Best Overall
In the template, display a message when the control is invalid and the user has edited or visited it. Then check the relevant error key:
<input [formControl]="name" required>
<div *ngIf="name.invalid && (name.dirty || name.touched)">
<p *ngIf="name.hasError('required')">Name is required.</p>
<p *ngIf="name.hasError('minlength')">Enter at least four characters.</p>
</div>Angular’s validation guide recommends checking dirty or touched so errors do not appear before the user has had a chance to edit the field. The built-in validator functions and their error keys are documented in the Validators API.
Write a custom synchronous validator
A reactive custom validator receives an AbstractControl. Return null when its value passes the rule, or an object describing the error when it fails:
import { AbstractControl, ValidationErrors } from '@angular/forms';
export function noWhitespace(control: AbstractControl): ValidationErrors | null {
return control.value?.trim() ? null : { whitespace: true };
}Add the function to a control’s validator list, then check its error key in the template. For rules that depend on multiple fields, attach a cross-field validator to the relevant form group and show the group error after the user has interacted with the form.
Rank #3
Add validation to a template-driven form
For template-driven forms, add supported attributes such as required and minlength to the input. Angular matches those attributes to validator functions. Export ngModel to a template variable to inspect the control’s state and errors:
<input name="name" ngModel required minlength="4" #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)">
<p *ngIf="name.errors?.['required']">Name is required.</p>
<p *ngIf="name.errors?.['minlength']">Enter at least four characters.</p>
</div>To add a custom template-driven validator, implement it in a directive and register the directive with NG_VALIDATORS. Angular’s form validation guide covers built-in and custom validation in both approaches.
Validate asynchronously
Use an async validator for checks that need asynchronous work, such as a server-side lookup. It returns a Promise or Observable that resolves to null for valid input or a validation-error object for invalid input. Angular runs async validators only after synchronous validators pass. An Observable used for validation must complete.
Recommended Free Tools
While the check is running, the control can be pending. Use that state to show a brief progress message rather than implying that the value has already passed:
<p *ngIf="username.pending">Checking username…</p>A remote check on every keystroke can create unnecessary requests. For the relevant control, consider setting updateOn: 'blur' or updateOn: 'submit' so validation runs less frequently.
Change validators at runtime
After adding, removing, replacing, or clearing validators dynamically, call updateValueAndValidity() on the control so Angular recalculates its status. Angular provides corresponding operations for asynchronous validators. See the validation guide for the supported runtime methods.
Angular validation and browser validation
Angular disables native browser form validation by default with novalidate, allowing Angular to manage validation feedback. To enable native browser validation alongside Angular’s checks, add ngNativeValidate to the form. Choose deliberately: browser validation may add its own feedback behavior in addition to messages rendered by your Angular template.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
