[Solved] You want to disable the submit button until the form is valid using template-driven validation. Which of these is the best way to do it?... to disable the button until the form is valid? | Angular

Angular - Template-Driven Forms

You want to disable the submit button until the form is valid using template-driven validation. Which of these is the best way to do it?

<form #myForm="ngForm">
  <input name="email" ngModel required email>
  <button type="submit" [disabled]="???">Submit</button>
</form>

What should replace ??? to disable the button until the form is valid?

AmyForm.invalid

BmyForm.valid

CmyForm.touched

D!myForm.pristine

Step-by-Step Solution

Solution:

Step 1: Understand form validity properties
The form object has a property invalid which is true when the form is not valid, and valid which is true when valid.
Step 2: Choose the best expression to disable button
Disabling the button when myForm.invalid is true means the button is disabled until the form becomes valid. Using myForm.valid would disable when valid (incorrect). Other options relate to touch or pristine state, not validity.
Final Answer:
myForm.invalid -> Option A
Quick Check:
Disable button when form.invalid is true [OK]

Quick Trick: Use form.invalid to disable submit until form is valid [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

You want to disable the submit button until the form is valid using template-driven validation. Which of these is the best way to do it?