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

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>
<button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>
</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();
});
};

Answer 1

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

Answer 2

$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>

Answer 3

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>
<button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>