Showing validation errors in Angular - Step-by-Step Execution

Concept Flow - Showing validation errors

User inputs data

↓

Form control updates value

↓

Validation runs

↓

Is input valid?

No→Show error message

Yes↓

No error shown

↓

User submits form

This flow shows how user input triggers validation, which then decides if error messages appear or not.

Execution Sample

Angular

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

@Component({
  standalone: true,
  selector: 'app-email-input',
  template: `
    <input [formControl]="emailControl" aria-label="Email input" />
    <div *ngIf="emailControl.invalid && emailControl.touched" role="alert">
      <span *ngIf="emailControl.errors?.['required']">Email is required.</span>
      <span *ngIf="emailControl.errors?.['email']">Enter a valid email.</span>
    </div>
  `
})
export class EmailInputComponent {
  emailControl = new FormControl('', [Validators.required, Validators.email]);
}

This Angular component shows an email input with validation errors displayed when input is invalid and touched.

Execution Table

Step	User Action	FormControl Value	Validation Status	Error Messages Shown
1	User focuses input and blurs, no typing yet	'' (empty)	Invalid (required)	Email is required.
2	User types 'abc' and blurs	'abc'	Invalid (email)	Enter a valid email.
3	User types '[e-mail]' and blurs	'[e-mail]'	Valid	No errors
4	User clears input and blurs	'' (empty)	Invalid (required)	Email is required.
5	User focuses input but does not type	'' (empty)	Invalid (required)	No errors (not touched)
6	User blurs input after empty	'' (empty)	Invalid (required)	Email is required.

💡 Validation stops updating error messages when input is valid or untouched.

Variable Tracker

Variable	Initial	Step 1	Step 2	Step 3	Step 4	Step 5	Step 6
emailControl.value	''	''	'abc'	'[e-mail]'	''	''	''
emailControl.invalid	true	true	true	false	true	true	true
emailControl.errors	{required: true}	{required: true}	{email: true}	null	{required: true}	{required: true}	{required: true}
emailControl.touched	false	true	true	true	true	false	true

Key Moments - 3 Insights

Why does the error message not show when the input is empty but not touched?

Because the template shows errors only when the control is invalid AND touched, as seen in step 5 of the execution_table.

Why does typing 'abc' show an email error instead of required error?

Because the input is not empty, so 'required' error clears, but 'email' validator fails, shown in step 2.

When does the error message disappear?

When the input becomes valid, like a proper email, errors become null and no messages show, as in step 3.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What error message is shown?

A Enter a valid email.

B Email is required.

C No errors

D Input is valid

💡 Hint

Check the 'Error Messages Shown' column at step 2 in the execution_table.

At which step does the form control become valid?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Validation Status' column to find when it changes to 'Valid'.

If the user never touches the input, will error messages show?

A Yes, always show errors

B No, errors show only after touched

C Errors show only if input is valid

D Errors show only on submit

💡 Hint

Refer to step 5 where input is invalid but not touched and no errors show.

Concept Snapshot

Angular validation errors show only when form control is invalid and touched.
Use *ngIf to check control.invalid && control.touched.
Validators like required and email set errors.
Error messages update as user types and blurs input.
This improves user experience by not showing errors prematurely.

Full Transcript

This Angular example shows how validation errors appear for an email input. The form control starts empty and invalid because it is required. When the user focuses and types, validation runs. If the input is not a valid email, an error message appears. Errors only show if the input has been touched (user interacted and left the field). When the input becomes valid, errors disappear. This flow helps users see helpful messages only when needed, improving clarity and accessibility.