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

Answer 1

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.