[Solved] Consider this Angular form snippet:<form #formRef="ngForm"> <input name="email" ngModel required> <button [disabled]="formRef.form.... | Angular

Angular - Template-Driven Forms

Consider this Angular form snippet:

<form #formRef="ngForm">
  <input name="email" ngModel required>
  <button [disabled]="formRef.form.invalid">Send</button>
</form>

What is the state of the Send button when the email input is empty?

AThe button is enabled because the form is untouched.

BThe button is disabled because the form is invalid.

CThe button is enabled because the input is empty but valid.

DThe button is disabled only if the input is touched.

Step-by-Step Solution

Solution:

Step 1: Check form validity
The input has required, so empty input makes the control invalid.
Step 2: Evaluate button disabled binding
The button is disabled when formRef.form.invalid is true, which it is when input is empty.
Final Answer:
The button is disabled because the form is invalid. -> Option B
Quick Check:
Required empty input invalidates form [OK]

Quick Trick: Required empty inputs make form invalid disabling buttons [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Consider this Angular form snippet: