Only Enabling the Submit Button if the Form is Valid


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


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.


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.