[Solved] In this Angular template:<input [formControl]="nameControl"> <div *ngIf="nameControl.invalid && nameControl.... What is the most probable cause? | Angular

Angular - Template-Driven Forms

In this Angular template:

<input [formControl]="nameControl">
<div *ngIf="nameControl.invalid && nameControl.touched">Name is required</div>

The error message never appears even when the input is empty and blurred. What is the most probable cause?

AThe *ngIf condition should use nameControl.dirty instead of touched

BThe input element is missing a name attribute

CThe required validator was not added to nameControl

DThe formControl is not bound correctly in the component

Step-by-Step Solution

Solution:

Step 1: Check if required validator is present
If the required validator is missing, the control will never be invalid for empty input.
Step 2: Confirm error message depends on invalid state
Since invalid depends on validators, missing required means invalid is false, so error won't show.
Final Answer:
The required validator was not added to nameControl -> Option C
Quick Check:
Validators must be added to trigger invalid state [OK]

Quick Trick: Add validators to form controls to trigger errors [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

In this Angular template: