You want to disable the submit button until the form is valid in a reactive form. Which is the correct way to do this in the template?

hard🚀 Application Q8 of 15

Angular - Template-Driven Forms

A<code><button type="submit" [disabled]="form.valid">Submit</button></code>

B<code><button type="submit" [disabled]="form.invalid">Submit</button></code>

C<code><button type="submit" [disabled]="form.pristine">Submit</button></code>

D<code><button type="submit" [disabled]="form.touched">Submit</button></code>

Step-by-Step Solution

Solution:

Step 1: Understand form validity properties
form.valid is true when form is valid; form.invalid is true when invalid.
Step 2: Disable button when form is invalid
Disabling button when form.invalid is true prevents submission until valid.
Final Answer:
<button type="submit" [disabled]="form.invalid">Submit</button> -> Option B
Quick Check:
Disable submit if form.invalid = true [OK]

Quick Trick: Disable submit button using form.invalid property [OK]

Common Mistakes:

MISTAKES

Master "Template-Driven Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

Want More Practice?

15+ quiz questions · All difficulty levels · Free

More Angular Quizzes