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 look http://stackoverflow.com/questions/18240168/genuinely-stop-a-element-from-binding-unbind-an-element-angularjs — vitr, Jun 19 '15 at 15:32
Have a shadow model. OnSubmit copy the form model to the real model — Michael, Jun 19 '15 at 15:33

score 4 · Accepted Answer · edited Jun 19 '15 at 15:36

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.

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

1 Answers1