CODEWITHSUNDEEP
javascriptangularjsformsbinding
ryancey
ryancey

Reputation: 1057

How to not update a model until form submission in Angular?

I'm looking for Angular to not update the model until the user submits the form. Or, in another way, to update the model only when the user has submitted the form.

<form ng-submit="process()">
    Value is : {{ model.property }}
    <input type="text" ng-model="model.property">
    <button type="submit">Submit</button>
</form>

I was thinking of something like ng-model-options="{ updateOn: null }" but it doesn't work.

Is this even possible without it getting too "hacky" (like getting each input's value on submit)?

Upvotes: 1

Views: 1799

Answers (1)

Okazari
Okazari

Reputation: 4597

You should clone your object using angular.copy.

 $scope.formData = angular.copy($scope.model);

<form ng-submit="process()">
    Value is : {{ formData.property }}
    <input type="text" ng-model="formData.property">
    <button type="submit">Submit</button>
</form>

Then on process you update the model.

 $scope.model = angular.copy($scope.formData);

You will be using a temporary model instead of your "real" one.

Upvotes: 4

Related Questions