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.

Practice

1. In Angular, when should you show validation error messages for a form field?

easy

A. Only after the user has touched or changed the field and it is invalid

B. Immediately when the form loads, regardless of user interaction

C. Only after the form is submitted, ignoring field interaction

D. Always show errors even if the field is valid

Solution

1. Step 1: Understand user experience best practice

   Showing errors only after user interaction prevents confusion and clutter.

2. Step 2: Angular validation behavior

   Angular's touched or dirty flags help detect user interaction before showing errors.

3. Final Answer:

   Only after the user has touched or changed the field and it is invalid -> Option A

4. Quick Check:

   Show errors after user interaction = D [OK]

Hint: Show errors only when user touched and invalid [OK]

Common Mistakes:

• Showing errors immediately on page load
• Showing errors without checking if field is invalid
• Waiting only for form submit to show errors

2. Which Angular directive is used to check if a form control is invalid and touched in a template?

easy

A. *ngIf="myControl.invalid && myControl.touched"

B. *ngFor="let control of myControl.invalid"

C. *ngSwitchCase="myControl.valid"

D. *ngModel="myControl.errors"

Solution

1. Step 1: Identify Angular directives for conditionally showing elements

   *ngIf is used to conditionally display content based on an expression.

2. Step 2: Check correct condition for validation errors

   Use myControl.invalid && myControl.touched to show errors only when invalid and user touched the field.

3. Final Answer:

   *ngIf="myControl.invalid && myControl.touched" -> Option A

4. Quick Check:

   *ngIf with invalid and touched = A [OK]

Hint: Use *ngIf with invalid and touched to show errors [OK]

Common Mistakes:

• Using *ngFor instead of *ngIf for condition
• Checking valid instead of invalid
• Using *ngModel incorrectly for validation display

3. Given this Angular template snippet:

<input [formControl]="emailControl">
<div *ngIf="emailControl.invalid && emailControl.touched">
  <small *ngIf="emailControl.errors?.required">Email is required.</small>
  <small *ngIf="emailControl.errors?.email">Invalid email format.</small>
</div>

What will be shown if the user focuses and leaves the input empty?

medium

A. The message 'Invalid email format.' will be displayed

B. No message will be displayed because the field is empty

C. The message 'Email is required.' will be displayed

D. Both messages will be displayed

Solution

1. Step 1: Analyze validation conditions

   The input is empty and touched, so required error is true, but email error is false because empty triggers required first.

2. Step 2: Determine which message shows

   Only the required error message is shown because emailControl.errors?.required is true.

3. Final Answer:

   The message 'Email is required.' will be displayed -> Option C

4. Quick Check:

   Empty + touched triggers required error = B [OK]

Hint: Empty touched field triggers required error message [OK]

Common Mistakes:

• Assuming invalid email message shows on empty input
• Showing no message on touched empty field
• Showing both messages simultaneously

4. You wrote this Angular code to show a required error:

<div *ngIf="emailControl.errors.required">Email is required.</div>

But the error never shows even when the field is empty and touched. What is the likely problem?

medium

A. You need to add Validators.email to the control

B. You forgot to check if the control is touched before showing errors

C. You should use emailControl.invalid instead of emailControl.errors.required

D. You must use ngModel instead of formControl

Solution

1. Step 1: Understand when errors should show

   Errors should show only after user interaction, so checking touched is important.

2. Step 2: Identify missing condition

   The code only checks errors.required but not if the user touched the field, so error stays hidden initially.

3. Final Answer:

   You forgot to check if the control is touched before showing errors -> Option B

4. Quick Check:

   Check touched before errors to show messages = C [OK]

Hint: Always check touched before showing validation errors [OK]

Common Mistakes:

• Showing errors without user interaction check
• Confusing invalid with errors property
• Adding unrelated validators like email for required error

5. You want to show validation errors for a password field only if the user has interacted with it and it is invalid. You also want to show a custom message if the password is less than 8 characters. Which Angular template snippet correctly implements this?

hard

A. <input type="password" [formControl]="passwordControl">
<div *ngIf="passwordControl.invalid">
<small *ngIf="passwordControl.errors?.minlength">Password must be at least 8 characters.</small>
</div>

B. <input type="password" [formControl]="passwordControl">
<div *ngIf="passwordControl.errors?.minlength">
<small>Password must be at least 8 characters.</small>
</div>

C. <input type="password" [formControl]="passwordControl">
<div *ngIf="passwordControl.touched">
<small *ngIf="passwordControl.errors?.minlength">Password must be at least 8 characters.</small>
</div>

D. <input type="password" [formControl]="passwordControl">
<div *ngIf="passwordControl.invalid && passwordControl.touched">
<small *ngIf="passwordControl.errors?.minlength">Password must be at least 8 characters.</small>
</div>

Solution

1. Step 1: Ensure errors show only after user interaction

   Check both invalid and touched to avoid showing errors prematurely.

2. Step 2: Show specific minlength error message

   Use passwordControl.errors?.minlength inside the conditional block to display the custom message.

3. Final Answer:

   Correctly combines invalid, touched, and minlength error check -> Option D

4. Quick Check:

   Check invalid and touched with minlength error = A [OK]

Hint: Combine invalid and touched to show specific error messages [OK]

Common Mistakes:

• Showing errors without checking touched
• Showing errors on invalid without user interaction
• Missing specific error condition for minlength