Prevent model update before save

Question

I go the list view page click on edit of any element. Change something on textbox and click cancel. This navigates to list view but the entry is now updated even without me saving.

Route

(function () {
    'use strict';

    angular.module('myApp.Group', ['ngRoute'])
        .config(['$routeProvider', function ($routeProvider, $rxStatusTagsProvider) {
            $routeProvider.when('/group/list', {
                templateUrl: 'group/templates/list_view.html',
                controller: "GroupListCtrl"
            });
            $routeProvider.when('/group/edit/:id', {
                templateUrl: 'group/templates/edit.html',
                controller: "GroupEditCtrl"
            });
        }]);

    //http://localhost:5000/groups/list
}());

Ctrl

(function () {
    "use strict";
    angular.module('myApp.Group')
        .controller("GroupListCtrl", function ($scope, GroupService) {
            $scope.groups = GroupService.list();
        })
        .controller("GroupEditCtrl", function ($scope, $routeParams, $location, GroupService) {
            var id = $routeParams.id;

            $scope.id = id;
            $scope.entry = GroupService.get(id);

            $scope.save = function (entry) {
                GroupService.save(entry);
                $location.path('/group/list');
            };

        })

}());

Service

(function () {
    "use strict";
    angular.module('myApp.Group')
        .service('GroupService', function ($http, $location, $rootScope) {

            var uid = 1,
                listData = [
                    {"id": 1, "name": "System Admins",  "description": "Lorem ipsuem"},
                    {"id": 2, "name": "OS Admin",     "description": "Lorem ipsuem"}
                ];

            this.get = function (id) {
                return listData[id - 1];
            };
        });
}());

Edit tmpl

<form method="post" ng-submit="groupForm.$valid && save(group)" name="groupForm" novalidate>
    <rx-form-fieldset>
        <rx-form-item label="Name">
            <input type="text" ng-model="entry.name" name="groupName" required autofocus ng-minlength="3" ng-maxlength="30"/>
            <div ng-show="groupForm.groupName.$dirty && groupForm.groupName.$invalid">
                <span class="error" ng-show="groupForm.groupName.$error.required">Required!</span>
                <span class="error" ng-show="groupForm.groupName.$error.minlength">Too short!</span>
                <span class="error" ng-show="groupForm.groupName.$error.maxlength">Too long!</span>
            </div>
        </rx-form-item>
        <rx-form-item label="Description">
            <textarea rows="10" cols="30" ng-model="entry.description" name="groupDescription" required ></textarea>
            <div ng-show="groupForm.groupDescription.$dirty && groupForm.groupDescription.$invalid">
                <span class="error" ng-show="groupForm.groupDescription.$error.required">Required!</span>
            </div>
        </rx-form-item>
        <rx-button toggle-msg="Loading..." default-msg="Save" type="submit" ></rx-button>
        <rx-button ng-controller="redirectCtrl" default-msg="Cancel" ng-click="back('group/list')"></rx-button>
    </rx-form-fieldset>
</form>

You need make a copy of your model. On reset click you can restore the copied model to the changed one — qamar, Jan 22 '15 at 04:55

qamar · Answer 1 · 2015-01-22T08:43:16.577

3

I think you need create a copy of your model in case you need to restore original state when cancel is invoked. To make a copy of your model you do a copy of the model in a separate JS object in the scope like following:

$scope.master= angular.copy($scope.entry);

Once you have cancel clicked you can restore master object into model to discard the changes:

angular.copy($scope.master, $scope.entry);

In case you want to look at API reference here is it for you https://docs.angularjs.org/api/ng/function/angular.copy

edited Jan 22 '15 at 08:43

answered Jan 22 '15 at 05:26

qamar

1,437
1
9
12

anyway to prevent two way binding – aWebDeveloper Jan 22 '15 at 06:40
and do you mean groups or group – aWebDeveloper Jan 22 '15 at 06:41
it should be your model name – qamar Jan 22 '15 at 07:10
So you basically editing $scope.entry right? If yes see updated answer – qamar Jan 22 '15 at 08:42

score 0 · Answer 2 · answered Jan 22 '15 at 04:52

0

First you need to save the old data when you click on element to open the model and when cancel is clicked you need to assigned old data back to your entry object

answered Jan 22 '15 at 04:52

Mahesh Thumar

4,257
5
22
30

score 0 · Answer 3 · answered May 11 '16 at 01:35

0

You can use $rollbackViewValue(). Angular Docs for ngModelController

answered May 11 '16 at 01:35

Jose Carrillo

1,830
3
16
19

Prevent model update before save

3 Answers3