How to correctly disable submit button in reactive forms in Angular

Introduction

Each form has one of three validation statuses:

• pending: async validations are occurring and errors are not yet available for the input value
• invalid: an error exists in the input value
• valid: no errors exist in the input value

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

Solution

Disable the button with !form.valid pattern.

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