How to correctly disable submit button in reactive forms in Angular

In this article, you can learn why you should always disable buttons with !form.valid.

August 3, 2022 angularangular-forms

You can view the source code for this project by following this link: GitHub


Each form has one of three validation statuses:

Writing [disable]="form.invalid", the application will not disable the button when the form is in pending status.


Disable the button with !form.valid pattern.

<button [disabled]="!form.valid">Submit</button>

Do you like the content?

Your support helps me continue my work. Please consider making a donation.

Donations are accepted through PayPal or Stripe. You do not need a account to donate. All major credit cards are accepted.

Leave a comment