You want to display a custom error message in Angular when a form control named 'password' is invalid due to either being required or having a minlength error, but only after the user has touched the field. Which template snippet correctly implements this?
A<div *ngIf="passwordControl.touched && (passwordControl.hasError('required') || passwordControl.hasError('minlength'))">Password is required and must be at least 8 characters.</div>
B<div *ngIf="passwordControl.errors.required || passwordControl.errors.minlength">Password is invalid.</div>
Show error only if passwordControl.touched is true and either required or minlength error exists.
Step 2: Evaluate options
<div *ngIf="passwordControl.touched && (passwordControl.hasError('required') || passwordControl.hasError('minlength'))">Password is required and must be at least 8 characters.</div> uses hasError() and combines conditions correctly with touched.
Final Answer:
<div *ngIf="passwordControl.touched && (passwordControl.hasError('required') || passwordControl.hasError('minlength'))">Password is required and must be at least 8 characters.</div> correctly implements the required logic.
Quick Check:
Use hasError() with touched for precise error display [OK]
Quick Trick:Use hasError() and touched to show specific errors [OK]
Common Mistakes:
MISTAKES
Checking errors without verifying touched
Using && instead of || for multiple errors
Accessing errors object directly without null checks
Master "Template-Driven Forms" in Angular
9 interactive learning modes - each teaches the same concept differently
