html - $scope.Form.field.$dirty = true 不起作用

Question

我想为表格中已编辑的单元格设置脏标志。当我单击保存按钮时，我需要检查编辑的字段是否脏。因为 X-editable 正在更新整个表格单元格值，包括已编辑和未编辑的单元格值。我需要使用脏标志检查所有已编辑的字段是什么，如果该字段是脏的，那么只有我必须将这些字段保存到 mongodb。为此，我使用这一行来设置 $dirty：

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

$scope.Form.$dirty = true;             

     //it is working

html代码：

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

控制器代码：

$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();
        });
    };

score 0 · Accepted Answer

尝试使用名称不是 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>

score 0 · Accepted Answer

因为 $dirty 没有在用户名对象中定义，或者用户名本身没有定义，要解决这个问题，您需要先将用户名定义到 Form 对象中，也请让表单也进入 $scope。

$scope.Form.username = {};

然后您可以将 $dirty 添加到用户名对象中，如下所示

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

score 0 · Accepted Answer

$dirty ：TRUE如果用户已经与表单交互或字段已被修改，它将是。

尝试这个：

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>

html - $scope.Form.field.$dirty = true 不起作用

3 回答 3

Related

Reference