Angular - Template-Driven Forms
Which of the following is the correct Angular template syntax to show an error message only when a form control named 'username' is invalid and touched?
Which of the following is the correct Angular template syntax to show an error message only when a form control named 'username' is invalid and touched?
easy📝 Syntax Q3 of 15
Step-by-Step Solution
Solution:
Step 1: Identify Angular structural directive for conditional display
*ngIf is the correct directive to conditionally show or hide elements based on a boolean expression.Step 2: Check syntax correctness
*ngShow does not exist in Angular, [hidden] hides but does not remove from DOM, *ngFor is for loops, so only *ngIf with the condition is correct.Final Answer:
<div *ngIf="username.invalid && username.touched">Error</div> -> Option BQuick Check:
Use *ngIf for conditional error display [OK]
Quick Trick: Use *ngIf to show/hide validation errors [OK]
Common Mistakes:
MISTAKES- Using non-existent *ngShow directive
- Using *ngFor instead of *ngIf
- Using [hidden] which only hides visually
Master "Template-Driven Forms" in Angular
Want More Practice?
15+ quiz questions · All difficulty levels · Free
Free Signup - Practice All QuestionsMore Angular Quizzes