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

Question

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)?

Have a shadow model. OnSubmit copy the form model to the real model — Michael
– Michael, Commented Jun 19, 2015 at 15:33

Pankaj Parkar · Accepted Answer · 2015-06-19 15:36:18Z

4

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.

edited Jun 19, 2015 at 15:36

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jun 19, 2015 at 15:33

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related