Disable submit button when form invalid with AngularJS

Question

I have my form like this    lt form name  myForm  gt       lt input name  myText  type  text  ng-model  mytext  required   gt       lt button disabled     myForm  invalid     gt Save lt  button gt   lt  form gt    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

User · Answer

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    lt form name  my-form  gt       lt input name  myText  type  text  ng-model  mytext  required   gt       lt button ng-disabled  my-form  invalid  gt Save lt  button gt   lt  form gt

User · Answer

x000D   x000D   lt form name  myForm  gt  x000D           lt input name  myText  type  text  ng-model  mytext  required  gt  x000D           lt button ng-disabled  myForm  pristine   myForm  invalid  gt Save lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    If you want to be a bit more strict

User · Answer

We can create a simple directive and disable the button until all the mandatory fields are filled   angular module  sampleapp   directive  disableBtn   function      return     restrict    A     link   function scope  element  attrs       var  el     element      var submitBtn    el find  button type  submit         var  name   attrs name     scope  watch  name      valid   function val        if  val         submitBtn removeAttr  disabled          else        submitBtn attr  disabled    disabled                                For More Info click here

User · Answer

You need to use the name of your form  as well as ng-disabled  Here s a demo on Plunker   lt form name  myForm  gt       lt input name  myText  type  text  ng-model  mytext  required   gt       lt button ng-disabled  myForm  invalid  gt Save lt  button gt   lt  form gt

User · Answer

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    lt form name  myForm  gt     lt input name  myText  type  text  ng-model  mytext  required   gt     lt button ng-disabled  myForm  invalid    myForm  pending  gt Save lt  button gt   lt  form gt

User · Answer

If you are using Reactive Forms you can use this    lt button  disabled    contactForm valid  type  submit  class  btn btn-lg btn primary   click   printSomething    gt Submit lt  button gt

[forms] Disable submit button when form invalid with AngularJS

Examples related to forms

Examples related to angularjs

Examples related to button

Examples related to disabled-control