[Solved] In Angular, given this template snippet:<input [formControl]="emailControl"> <div *ngIf="emailControl.invalid && emailControl.... | Angular

Angular - Template-Driven Forms

In Angular, given this template snippet:

<input [formControl]="emailControl">
<div *ngIf="emailControl.invalid && emailControl.touched">Invalid email address</div>

What happens if the user clicks into the input, enters an invalid email, then clicks away?

ANo message will be shown because the control is not dirty.

BThe message 'Invalid email address' will be displayed.

CThe message will show only if the form is submitted.

DThe message appears immediately when the user starts typing.

Step-by-Step Solution

Solution:

Step 1: Understand the condition
The error message is shown when emailControl.invalid and emailControl.touched are both true.
Step 2: User interaction
The user focuses the input (making it touched), enters invalid data (making it invalid), then leaves the input.
Final Answer:
The message 'Invalid email address' will be displayed. -> Option B
Quick Check:
Invalid and touched triggers error display [OK]

Quick Trick: Errors show when invalid and touched are true [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

In Angular, given this template snippet: