How to Show Validation Errors in Angular Forms

In Angular, show validation errors by checking the form control's invalid and touched or dirty states in the template. Use Angular's built-in validators and display error messages conditionally with *ngIf based on these states.

Syntax

To show validation errors in Angular, use the form control's properties in the template:

• formControl.invalid: true if the control has errors.
• formControl.touched: true if the user has focused and left the control.
• formControl.dirty: true if the user has changed the control's value.

Combine these to show errors only after user interaction, for example:

<div *ngIf="formControl.invalid && (formControl.touched || formControl.dirty)">Error message</div>

html

<input [formControl]="emailControl" placeholder="Email" />
<div *ngIf="emailControl.invalid && (emailControl.touched || emailControl.dirty)">
  <small *ngIf="emailControl.errors?.required">Email is required.</small>
  <small *ngIf="emailControl.errors?.email">Enter a valid email.</small>
</div>

Output

An input box for email with error messages shown below only after user interaction if invalid.

Example

This example uses Angular Reactive Forms to show validation errors for an email input. It displays messages when the email is empty or invalid after the user interacts with the input.

typescript

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-email-form',
  template: `
    <form>
      <label for="email">Email:</label>
      <input id="email" [formControl]="emailControl" placeholder="Enter your email" />
      <div *ngIf="emailControl.invalid && (emailControl.touched || emailControl.dirty)" style="color: red;">
        <small *ngIf="emailControl.errors?.required">Email is required.</small>
        <small *ngIf="emailControl.errors?.email">Please enter a valid email address.</small>
      </div>
    </form>
  `
})
export class EmailFormComponent {
  emailControl = new FormControl('', [Validators.required, Validators.email]);
}

Output

A form with an email input that shows 'Email is required.' if empty and 'Please enter a valid email address.' if the format is wrong, only after user touches or changes the input.

Common Pitfalls

Common mistakes when showing validation errors in Angular include:

• Showing errors immediately on page load without user interaction, which confuses users.
• Not checking touched or dirty states before showing errors.
• Forgetting to add validators to the form controls.
• Using incorrect error keys when checking errors object.

Always combine invalid with touched or dirty to avoid premature error messages.

html

Wrong way:
<input [formControl]="nameControl" />
<div *ngIf="nameControl.invalid">Name is required.</div>

Right way:
<input [formControl]="nameControl" />
<div *ngIf="nameControl.invalid && (nameControl.touched || nameControl.dirty)">Name is required.</div>

Output

The wrong way shows error immediately; the right way shows error only after user interaction.

Quick Reference

Property	Description	Use for Showing Errors When
formControl.invalid	True if control has validation errors	Always check to know if errors exist
formControl.touched	True if user focused and left the control	Show errors after user leaves input
formControl.dirty	True if user changed the control value	Show errors after user changes input
formControl.errors	Object with error keys and details	Check specific error types like 'required' or 'email'

Key Takeaways

Show validation errors only when the form control is invalid and the user has interacted with it (touched or dirty).

Use Angular's built-in validators and check the errors object for specific messages.

Avoid showing errors immediately on page load to improve user experience.

Combine *ngIf with form control states to conditionally display error messages.

Always add validators to your form controls to enable validation checks.