Disable submit button when form invalid with AngularJS Disable submit button when form invalid with AngularJS angularjs angularjs

Disable submit button when form invalid with AngularJS


You need to use the name of your form, as well as ng-disabled: Here's a demo on Plunker

<form name="myForm">    <input name="myText" type="text" ng-model="mytext" required />    <button ng-disabled="myForm.$invalid">Save</button></form>


To add to this answer. I just found out that it will also break down if you use a hyphen in your form name (Angular 1.3):

So this will not work:

<form name="my-form">    <input name="myText" type="text" ng-model="mytext" required />    <button ng-disabled="my-form.$invalid">Save</button></form>


Selected response is correct, but someone like me, may have issues with async validation with sending request to the server-side - button will be not disabled during given request processing, so button will blink, which looks pretty strange for the users.

To void this, you just need to handle $pending state of the form:

<form name="myForm">  <input name="myText" type="text" ng-model="mytext" required />  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button></form>