Prevent ng-model Changes Before Updating Form Data

By default when you write something in ng-model directive (in an input field) then the ng-modal value is automatically changed.

But if you want to make that changes happened after a task done. Then you need to modify this default behavior of ng-modal directive. To modify the default behavior of ng-modal directive you need to use ngModelOptions directive.

Prevent ng-model Changes Before Updating Form Data
Prevent ng-model Changes Before Updating Form Data

Prevent ng-model Changes Before Updating Form Data

ngModalOptions allows updateOn and debounce properties which tell when value need to change of ng-modal. updateOn property is for either value will change or not and debounce property is for delay time show to updated value.

See the sample code snippet

In this code snippet, you can see Name & Email will be changed and shown after updating these data (into the database). If any error or warning occurred when updating the value into the database then the value will not update and will not show the update value as well.

And also here I have cancelUpdate() method (with $rollbackViewValue) for canceling update user’s data. Suppose you write something then decide you will not update it. Then you have to click on ‘Cancel’ button. And $rollbackViewValue is responsive to revert ng-modal changes value

I hope you this article will help you to prevent ng-model changes before updating form Data with canceling update option.