How to validate forms in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Implementing comprehensive form validation is crucial for ensuring data quality and providing clear user feedback in Angular applications. As the creator of CoreUI with over 25 years of development experience building Angular applications since 2014, I’ve implemented form validation extensively in our admin components to ensure reliable data entry across enterprise applications. The most robust approach is using Angular’s built-in validators combined with reactive forms for real-time validation feedback and programmatic control. This method provides immediate validation response, clear error messaging, and prevents invalid form submission effectively.
Use Angular’s built-in validators with reactive forms to validate form inputs and display error messages.
import { Component } from '@angular/core'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
@Component({
selector: 'app-validated-form',
template: `
<form [formGroup]="validatedForm" (ngSubmit)="onSubmit()">
<div>
<input formControlName="email" placeholder="Email">
<div *ngIf="email?.invalid && email?.touched" class="error">
<span *ngIf="email?.errors?.['required']">Email is required</span>
<span *ngIf="email?.errors?.['email']">Invalid email format</span>
</div>
</div>
<button type="submit" [disabled]="!validatedForm.valid">Submit</button>
</form>
`
})
export class ValidatedFormComponent {
validatedForm: FormGroup
constructor(private fb: FormBuilder) {
this.validatedForm = this.fb.group({
email: ['', [Validators.required, Validators.email]]
})
}
get email() { return this.validatedForm.get('email') }
onSubmit() {
if (this.validatedForm.valid) {
console.log('Valid form submitted:', this.validatedForm.value)
}
}
}
Angular provides built-in validators like Validators.required, Validators.email, and Validators.minLength that you apply to form controls. The form control’s invalid, touched, and errors properties determine when and what validation messages to display. The valid property on the form group enables or disables form submission. This creates a responsive validation system that provides immediate feedback as users interact with the form while preventing invalid data submission.
Best Practice Note:
This is the validation approach we use throughout CoreUI Angular components to ensure reliable form data entry and clear user feedback.
Always check both invalid and touched states before showing errors to avoid displaying validation messages before users interact with fields.
