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.