Showing validation errors in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular show validation errors in a reactive form?

Consider a reactive form with a required input field. What will Angular display when the user focuses out of the input without entering any value?

Angular

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

@Component({
  selector: 'app-sample-form',
  template: `
    <input [formControl]="nameControl" aria-label="Name input" />
    <div *ngIf="nameControl.invalid && (nameControl.dirty || nameControl.touched)" role="alert">
      Name is required.
    </div>
  `,
  standalone: true
})
export class SampleFormComponent {
  nameControl = new FormControl('', Validators.required);
}

A The error message 'Name is required.' appears only after the input loses focus without a value.

B The error message appears immediately when the form loads, before user interaction.

C No error message appears because the input is empty but untouched.

D The error message appears only if the user submits the form.

💡 Hint

Think about when Angular marks a control as touched or dirty to show errors.

Angular shows validation errors when the control is invalid and either touched or dirty. This means the user interacted with the input and then left it empty, triggering the error message.

📝 Syntax

intermediate

Identify the syntax error in this Angular template for showing validation errors

Which option correctly fixes the syntax error in this Angular template snippet? Template snippet: `

Error

`

Angular

<input [formControl]="formControl" />
<div *ngIf="formControl.invalid && formControl.touched">Error</div>

A Replace formControl.touched with formControl.dirty to show error only when input changed.

B Change *ngIf to [hidden] to hide the div instead of removing it.

C No syntax error; the code is correct as is.

D Add parentheses around the condition: *ngIf="(formControl.invalid && formControl.touched)"

💡 Hint

Check if the *ngIf directive syntax is correct and if the condition is valid.

The *ngIf directive syntax is correct and the condition uses valid properties of the form control. No syntax error exists.

🔧 Debug

advanced

Why does the validation error not show even when the input is empty and touched?

Given this Angular reactive form code, why does the error message not appear when the input is empty and the user has focused and blurred the input? Component template: `

Email is required.

` Component code: `emailControl = new FormControl('', []);`

A The *ngIf condition is incorrect; it should check emailControl.dirty instead of touched.

B The FormControl has no validators, so it is never invalid.

C The input is missing the required attribute, so validation does not trigger.

D The error message is hidden by CSS, so it does not appear.

💡 Hint

Check the validators assigned to the FormControl.

The FormControl has an empty validators array, so it never becomes invalid. Without a required validator, the control is always valid even if empty.

❓ state_output

advanced

What is the value of formControl.errors after invalid input?

If a FormControl has Validators.required and Validators.minLength(5), and the user enters 'abc', what is the value of formControl.errors?

Angular

import { FormControl, Validators } from '@angular/forms';
const control = new FormControl('abc', [Validators.required, Validators.minLength(5)]);
const errors = control.errors;

A {"minlength": {"requiredLength": 5, "actualLength": 3}}

B {"required": true}

C null

D {"minlength": true, "required": true}

💡 Hint

Check which validators fail given the input 'abc'.

The input is not empty, so required passes. But length is less than 5, so minlength error appears with details.

🧠 Conceptual

expert

Which Angular feature helps show validation errors only after user interaction?

In Angular reactive forms, which feature ensures validation errors appear only after the user has interacted with the form control?

A Adding the novalidate attribute to the form element.

B Setting the updateOn option to 'submit' when creating the FormControl.

C Using the Validators.compose method to combine validators.

D Using the touched and dirty properties of the FormControl in the template condition.

💡 Hint

Think about how Angular tracks user interaction with form controls.

The touched and dirty properties indicate if the user has focused or changed the input, so errors show only after interaction.

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