$scope.Form.field.$dirty = true is not working

Question

I want to set dirty flag for edited cells in the table. When I click the save button I need to check the edited field is dirty is true or not. Because X-editable is updating entire table cell values both edited and unedited cell values.I need to check what are all the edited fields using dirty flag and if that field is dirty then that fields only i have to save in to mongodb. for that I used this line to set the $dirty:

$scope.Form.username.$dirty = true;               // this throwing TypeError:$dirty is undefined error

$scope.Form.$dirty = true;             

     //it is working

html code:

<form name="profileform">
                                    <div class="modal fade" id="myModal" role="dialog">
                                        <div class="modal-dialog" id="myModal">

                                            <!-- Modal content-->
                                            <div class="modal-content" style="margin-top:135px">
                                                <div class="modal-header">

                                                    <h4 class="modal-title pull-left"> Add New Role</h4>
                                                    <button type="button" class="close pull-right"
                                                            data-dismiss="modal" aria-hidden="true">
                                                        x
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row" style="margin-bottom:1%">
                                                        <div class="col-xs-3">
                                                            <h6><strong>Role<span style="color:green;">*</span></strong></h6>
                                                        </div>
                                                        <div class="col-xs-9">
                                                            <input type="text" name="Name" class="form-control" ng-model="Role.RoleName" />
                                                            <!--<span class="error" ng-show="profileform.RoleName.$invalid ">Please enter a Role Name</span>-->
                                                        </div>
                                                    </div>

                                                    <div class="row" style="margin-bottom:1%">
                                                        <div class="col-xs-3">
                                                            <h6><strong> Description</strong></h6>
                                                        </div>
                                                        <div class="col-xs-9">
                                                            <textarea name="Description" style="width: 100%; max-height: 200px; max-width: 100%;" 
                                                                      ng-model="Role.Description" maxlength="255"></textarea>
                                                        </div>
                                                    </div>

                                                    <div class="row" style="margin-bottom:1%">
                                                        <div class="col-xs-3">
                                                            <h6><strong>IsActive?</strong></h6>
                                                        </div>
                                                        <div class="col-xs-9">
                                                            <input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid" data-dismiss="modal">Save</button>&nbsp;&nbsp;
                                                    <button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>&nbsp;&nbsp;&nbsp;&nbsp;
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>

controller code:

$scope.AddRole = function () {
        debugger;
        console.log($scope.profileform.RoleName.$dirty);
        console.log($scope.profileform.Description.$dirty);
        $http.post('/AddNewRole', $scope.Role).then(function (response) {
            //console.log(response);
            $notify.success('Success', 'record inserted Successfully');
            refresh();
        });
    };

console.log($scope.profileform.RoleName.$dirty) is showing false even I changed the textbox value also — MNK, Apr 13 '17 at 12:05
Let join the discussion http://chat.stackoverflow.com/rooms/141643/angularjs-discuses — Manikandan Velayutham, Apr 13 '17 at 13:02

score 0 · Answer 1 · answered Apr 13 '17 at 07:23

0

Because $dirty is not defined in username object,or username is itself not defined, To fix the issue you need to first define the username into the Form object also please make sue Form is also into the $scope.

$scope.Form.username = {};

Then you can add $dirty into the username object like below

$scope.Form.username['$dirty'] = true

answered Apr 13 '17 at 07:23

mohan rathour

420
2
12

Now i am getting TypeError: username is undefined – MNK Apr 13 '17 at 07:32
that's means Form is also not defined, To fix that can define $scope.Form = {}; then $scope.Form['username'] = {}; $scope.Form.username['$dirty'] = true – mohan rathour Apr 13 '17 at 08:18

Manikandan Velayutham · Answer 2 · 2017-04-13T12:41:54.813

Try with names not ng-model.

angular.module('exApp',[]).controller('ctrl', function($scope){
$scope.name="Mani"; $scope.emails = "mani@gmail.com";

$scope.sub = function(){
console.log($scope.frm.yourname.$dirty, $scope.frm.mail.$dirty);
$scope.frm.yourname.$dirty = true;
console.log("I was set '@true': " + $scope.frm.yourname.$dirty);
}

$scope.AddRole = function(){
console.log("Role name dirty check: "+ $scope.profileform.Name.$dirty);
console.log("Description dirty check: "+ $scope.profileform.Description.$dirty);
}
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<form name="frm" novalidate ng-submit="sub()">
<input type="text" name="yourname" ng-model="name">
<input type="email" name="mail" ng-model="emails" required>
<input type="submit">
</form>
<br><br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Add role
</button>
<form name="profileform">
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" id="myModal">

            <!-- Modal content-->
            <div class="modal-content" style="margin-top:135px">
                <div class="modal-header">

                    <h4 class="modal-title pull-left"> Add New Role</h4>
                    <button type="button" class="close pull-right"
                    data-dismiss="modal" aria-hidden="true">
                    x
                </button>
            </div>
            <div class="modal-body">
                <div class="row" style="margin-bottom:1%">
                    <div class="col-xs-3">
                        <h6><strong>Role<span style="color:green;">*</span></strong></h6>
                    </div>
                    <div class="col-xs-9">
                        <input type="text" name="Name" class="form-control" ng-model="Role.RoleName" />
                        <!--<span class="error" ng-show="profileform.RoleName.$invalid ">Please enter a Role Name</span>-->
                    </div>
                </div>

                <div class="row" style="margin-bottom:1%">
                    <div class="col-xs-3">
                        <h6><strong> Description</strong></h6>
                    </div>
                    <div class="col-xs-9">
                        <textarea name="Description" style="width: 100%; max-height: 200px; max-width: 100%;" 
                        ng-model="Role.Description" maxlength="255"></textarea>
                    </div>
                </div>

                <div class="row" style="margin-bottom:1%">
                    <div class="col-xs-3">
                        <h6><strong>IsActive?</strong></h6>
                    </div>
                    <div class="col-xs-9">
                        <input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid" data-dismiss="modal">Save</button>&nbsp;&nbsp;
                <button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>
    </div>
</div>
</form>

</body>

I am trying with name only. In my form I have used ng-model name and name is same name — MNK, Apr 13 '17 at 08:18

score 0 · Answer 3 · answered Apr 13 '17 at 07:42

$dirty : It will be TRUE, if the user has already interacted with the form or if the field has been modified.

Try this :

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) {

    $scope.FormSubmit = function () {
        console.log($scope.form.username.$dirty);
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <form name="form" novalidate class="simple-form">Name:
        <input type="text" name="username" ng-model="user.name" required />
        <br />
        <input type="submit" ng-click="FormSubmit()" value="Save" />
    </form>
</div>

Same code i Have tried in my page it is showing false only – MNK Apr 13 '17 at 12:06 — MNK, Apr 13 '17 at 12:06
Share the `plnkr` or `fiddle` url. – Debug Diva Apr 13 '17 at 12:32 — Debug Diva, Apr 13 '17 at 12:32

$scope.Form.field.$dirty = true is not working

3 Answers3