Showing validation errors in Angular

Introduction

Showing validation errors helps users know what they need to fix in a form. It makes forms easier and clearer to use.

When you want to check if a user typed a valid email address.

When you want to make sure a required field is not empty.

When you want to limit the length of a password.

When you want to show messages right after the user interacts with a form field.

Syntax

Angular

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

@Component({
  standalone: true,
  selector: 'app-simple-form',
  template: `
    <input [formControl]="nameControl" aria-describedby="nameError" />
    <div *ngIf="nameControl.invalid && nameControl.touched" id="nameError" role="alert">
      <small *ngIf="nameControl.errors?.['required']">Name is required.</small>
      <small *ngIf="nameControl.errors?.['minlength']">Name must be at least 3 characters.</small>
    </div>
  `
})
export class SimpleFormComponent {
  nameControl = new FormControl('', [Validators.required, Validators.minLength(3)]);
}

Use FormControl with validators to track input and errors.

Show error messages only when the control is invalid and the user has touched it.

Examples

Simple required field validation with error message.

Angular

nameControl = new FormControl('', Validators.required);

// In template:
// <div *ngIf="nameControl.invalid && nameControl.touched">
//   <small *ngIf="nameControl.errors?.['required']">This field is required.</small>
// </div>

Validation for required and email format with specific messages.

Angular

emailControl = new FormControl('', [Validators.required, Validators.email]);

// In template:
// <div *ngIf="emailControl.invalid && emailControl.touched">
//   <small *ngIf="emailControl.errors?.['required']">Email is required.</small>
//   <small *ngIf="emailControl.errors?.['email']">Enter a valid email.</small>
// </div>

Password field with required and minimum length validation.

Angular

passwordControl = new FormControl('', [Validators.required, Validators.minLength(6)]);

// In template:
// <div *ngIf="passwordControl.invalid && passwordControl.touched">
//   <small *ngIf="passwordControl.errors?.['required']">Password is required.</small>
//   <small *ngIf="passwordControl.errors?.['minlength']">Password must be at least 6 characters.</small>
// </div>

Sample Program

This component shows a login form with email and password fields. It shows error messages below each input if the user leaves the field empty or types invalid data. The login button is disabled until both fields are valid.

Angular

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

@Component({
  standalone: true,
  selector: 'app-login-form',
  template: `
    <form>
      <label for="email">Email:</label>
      <input id="email" type="email" [formControl]="emailControl" aria-describedby="emailError" />
      <div *ngIf="emailControl.invalid && emailControl.touched" id="emailError" role="alert" 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>

      <label for="password">Password:</label>
      <input id="password" type="password" [formControl]="passwordControl" aria-describedby="passwordError" />
      <div *ngIf="passwordControl.invalid && passwordControl.touched" id="passwordError" role="alert" style="color: red;">
        <small *ngIf="passwordControl.errors?.['required']">Password is required.</small>
        <small *ngIf="passwordControl.errors?.['minlength']">Password must be at least 6 characters.</small>
      </div>

      <button type="submit" [disabled]="emailControl.invalid || passwordControl.invalid">Login</button>
    </form>
  `
})
export class LoginFormComponent {
  emailControl = new FormControl('', [Validators.required, Validators.email]);
  passwordControl = new FormControl('', [Validators.required, Validators.minLength(6)]);
}

Important Notes

Use aria-describedby and role="alert" for better accessibility so screen readers announce errors.

Only show errors after the user has touched the input to avoid confusion.

Disable submit buttons when the form is invalid to prevent bad submissions.

Summary

Validation errors help users fix mistakes in forms.

Show errors only when the user interacts with the field and it is invalid.

Use Angular's FormControl and Validators to manage validation easily.