CODEWITHSUNDEEP
htmlformsangularjs
Jago
Jago

Reputation: 2925

Refresh Angular output on input reset

I have several <input> fields within a <form>. Angular takes the value from those fields regardless of the <form> (which is actually there only for Bootstrap to apply the right styles to inner fields).

Now, I want to be able to reset the fields, and so get Angular update the output associated to them as well. However, a regular <input type="reset"/> button is not working. It resets the values of all the <input> fields, but Angular is not refreshing the output that is based on the fields after it.

Is there any way to tell Angular to refresh the outputs based on the current state of the fields? Something like a ng-click="refresh()"?

Upvotes: 0

Views: 565

Answers (2)

Vianney Dupoy de Guitard
Vianney Dupoy de Guitard

Reputation: 2264

Let's say you have your model called address. You have this HTML form.

<input [...] ng-model="address.name" />
<input [...] ng-model="address.street" />
<input [...] ng-model="address.postalCode" />
<input [...] ng-model="address.town" />
<input [...] ng-model="address.country" />

And you have this in your angular controller.

$scope.reset = function() {
    $scope.defaultAddress = {};
    $scope.resetAddress = function() {
        $scope.address = angular.copy($scope.defaultAddress);
    }
};

JSFiddle available here.

Upvotes: 1

subZero
subZero

Reputation: 5176

You should have your values tied to a model.

<input ng-model="myvalue">

Output: {{myvalue}}

$scope.refresh = function(){
   delete $scope.myvalue;
}

JSFiddle: http://jsfiddle.net/V2LAv/

Also check out an example usage of $pristine here: http://plnkr.co/edit/815Bml?p=preview

Upvotes: 0

Related Questions