Angularjs + Disable and Enable submit button

Question

I have sample code like this:

Html Code:

<body ng-controller="MainCtrl">
    <form name="myForm">
      <input name="myText" type="text" name="test" ng-model="mytext" required />
      <button ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
    </form>
  </body>

Js code:

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.save = function(){
    //logic or http method
    console.log("Test");
  }
});

Attached the code in this link: Click Here

Logic:

Default save button disabled.
After enter the form enable the button.
After save again disable the save button.
Again user enter the text need to enable save button.

Note: Here I attached only one input but I have multiple input fields. Also, In save function I had logic data save into database.

you ned to check if the form is dirty and that is easy (myForm.$dirty) and then you set the form to pristine in your save()-function, but your $scope will mess things up, so you need to check this post: stackoverflow.com/questions/27191744/setpristine-not-working — Johan Blomgren
– Johan Blomgren, Commented Dec 18, 2016 at 14:18

krivtom · Accepted Answer · 2016-12-18 14:14:56Z

You can use $pristine to identify if there were any changes to the form and enable button only then:

<body ng-controller="MainCtrl">
    <form name="myForm">
        <input name="myText" type="text" name="test" ng-model="mytext" required />
        <button ng-click="save(myForm)" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
    </form>
</body>

Notice how $pristine is used on ng-disabled:

ng-disabled="myForm.$invalid || myForm.$pristine"

In this case button will be disabled if form is invalid or if there were no changes to the form.

If you use this approach you also need to set the form to pristine after saving the data. You can use method $setPristine:

$scope.save = function(myForm) {
    // set form to pristine
    myForm.$setPristine();
}

Notice that there is a form parameter which is used to pass a form to the method. In HTML you also need to pass this parameter as part of ng-click:

ng-click="save(myForm)"

Here is JSFiddle that demonstrates the functionality

For more information check out documentation of FormController.

Deep · Accepted Answer · 2016-12-18 13:54:56Z

0

you have disabled the submit button when the form is invalid.

myForm.$invalid

so whenever a required field is blank the form will be invalid and button will be disabled. As soon as all the required input in the form have values, submit button will be enabled.

To make it disabled you need to reset all the modal variables of the required inputs once the save has done its work i.e on the success call back of http request reset the model variables.

answered Dec 18, 2016 at 13:54

Deep

9,7962 gold badges24 silver badges34 bronze badges

Comments

miqe · Accepted Answer · 2016-12-18 14:02:02Z

0

Well here is how i would do it, i'll add another tracking variable. something like this.

$scope.btnStatus = true;
  $scope.save = function(){
    //logic or http method
    $scope.btnStatus = false;
    console.log("Test");
  }
  $scope.onChange = function(){

    if($scope.btnStatus == false)
      $scope.btnStatus = true;
  }

and the html would look like this.

<form name="myForm">
  <input name="myText" type="text" name="test" ng-change="onChange()" ng-model="mytext" required /> 
  <button ng-click="save()"  ng-disabled="myForm.$invalid || !btnStatus">Save</button>
</form>

Here is a working code based off of your code.

answered Dec 18, 2016 at 14:02

miqe

3,3893 gold badges31 silver badges37 bronze badges

2 Comments

Johan Blomgren Over a year ago

using $pristine is better, no need for more variables or functions

miqe Over a year ago

@JohanBlomgren just because there are a better ways to do that, that doesn't mean i deserve a down vote. Thanks anyway

Collectives™ on Stack Overflow

Angularjs + Disable and Enable submit button

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related