Disable submit button when form invalid with AngularJS

ali picture ali · Mar 8, 2013 · Viewed 239.6k times · Source

I have my form like this:

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

As you may see, the button is disabled if the input is empty but it doesn't change back to enabled when it contains text. How can I make it work?

Answer

Ben Lesh picture Ben Lesh · Mar 8, 2013

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>