How to show validation errors in Angular forms
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Displaying validation error messages in Angular forms provides clear feedback to users about input requirements and validation failures. As the creator of CoreUI with over 11 years of Angular development experience, I’ve implemented comprehensive form validation systems in numerous enterprise applications. From my expertise, the most effective approach is checking form control errors in templates and displaying contextual error messages based on specific validation failures. This pattern ensures users understand exactly what needs to be corrected for successful form submission.
Check form control errors in templates and display specific error messages based on validation failures.
// Component
export class UserFormComponent {
userForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]]
})
constructor(private fb: FormBuilder) {}
}
<!-- Template -->
<form [formGroup]="userForm">
<input formControlName="email" type="email" placeholder="Email">
<div *ngIf="userForm.get('email')?.errors && userForm.get('email')?.touched">
<div *ngIf="userForm.get('email')?.errors?.['required']">
Email is required
</div>
<div *ngIf="userForm.get('email')?.errors?.['email']">
Please enter a valid email address
</div>
</div>
<input formControlName="password" type="password" placeholder="Password">
<div *ngIf="userForm.get('password')?.errors && userForm.get('password')?.touched">
<div *ngIf="userForm.get('password')?.errors?.['required']">
Password is required
</div>
<div *ngIf="userForm.get('password')?.errors?.['minlength']">
Password must be at least 8 characters
</div>
</div>
</form>
Here userForm.get('email')?.errors checks for validation errors on the email field, and touched ensures errors only show after user interaction. Each validation error type like required or email is checked individually to display specific, helpful error messages. The optional chaining ?. operator prevents errors when the form control doesn’t exist.
Best Practice Note:
This is the same approach we use in CoreUI Angular components for providing clear, actionable feedback in enterprise form applications. Always combine error checking with touched or dirty states to avoid showing errors before users interact with fields, and provide specific messages for each validation rule.
