AngularJS how to disable button after click

Question

Hi I have a form with some inputs like email, title, color...

I have 2 buttons "Save" and "Undo changes".

I need that this buttons will be always disabled accept, if something was changed. For example I started to change email and then I considered. While I'm typing new email buttons should be enabled, but after click on one of them they should be disabled again.

<form name="form" ng-submit="change()" novalidate>
    <input type="text" ng-model="title"/>
    <input type="email" name="email" ng-model="email" placeholder="{{email}}" />
    <input type="color" ng-model="color"/>

    <button type="submit" ng-disabled="!form.$dirty">SAVE</button>
    <a ng-click="cancel()" ng-disabled="!form.$dirty">UNDO CHANGES</a>
</form>

How can I make them disable again after click on one of buttons?

seanhodges · Accepted Answer · 2015-07-28 12:25:47Z

1

Call $scope.form.$setPristine() to cancel all the dirty flags:

function TodoCtrl($scope) {

    $scope.change = function() {
        $scope.form.$setPristine();
    }

    $scope.cancel = function() {
        $scope.form.$setPristine();
    }
}

Example: http://jsfiddle.net/ej5et0f5/1/

edited Jul 28, 2015 at 12:25

answered Jul 28, 2015 at 11:05

seanhodges

17.6k17 gold badges74 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shomz · Accepted Answer · 2015-07-28 10:55:59Z

1

Simply create a flag variable that you'll set to true after submitting and to false after changing inputs, then just do:

<button type="submit" ng-disabled="flagVariable">

answered Jul 28, 2015 at 10:55

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Collectives™ on Stack Overflow

AngularJS how to disable button after click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related