CODEWITHSUNDEEP
angularjs
user3008972
user3008972

Reputation: 33

AngularJS how to disable button after click

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?

Upvotes: 3

Views: 7231

Answers (2)

seanhodges
seanhodges

Reputation: 17524

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/

Upvotes: 1

Shomz
Shomz

Reputation: 37711

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">

Upvotes: 1

Related Questions