[Solved] Given this Angular template snippet:<form #f="ngForm"> <input name="email" ngModel required> <button [disabled]="!f.form.... | Angular

Angular - Template-Driven Forms

Given this Angular template snippet:

<form #f="ngForm">
  <input name="email" ngModel required>
  <button [disabled]="!f.form.valid">Submit</button>
</form>

What happens to the Submit button when the input is empty?

AThe Submit button is enabled regardless of input.

BThe Submit button is disabled only if the input is touched.

CThe Submit button is disabled because the form is invalid.

DThe Submit button is enabled only if the input is dirty.

Step-by-Step Solution

Solution:

Step 1: Understand form validity with required input
The input has the required attribute, so if empty, the form is invalid.
Step 2: Analyze the button's disabled binding
The button is disabled when !f.form.valid is true, meaning when the form is invalid.
Final Answer:
The Submit button is disabled because the form is invalid. -> Option C
Quick Check:
Required empty input disables button = B [OK]

Quick Trick: Button disabled if form invalid (required empty input) [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this Angular template snippet: