Only Enabling the Submit Button if the Form is Valid

Problem

You wish to disable the Submit button as long as the form contains invalid data.

Solution

Use the $form.invalid state in combination with a ng-disabled directive.

Here is the changed submit button:

<button ng-disabled="form.$invalid" class="btn">Submit</button>

You can find the complete example on github.

Discussion

The Form Controller attributes form.$invalid and friends are very useful to cover all kinds of use cases which focus on the form as a whole instead of individual fields.

Note that you have to assign a name attribute to the form element, otherwise form.$invalid won’t be available.

Checkout my new project:

Vue.js Component Patterns Book

The goal of this course is to teach you the fundamentals to make Vue.js components that are simpler, more flexible and most of all fun to build and use!