在 angularjs 中使用 $dirty 来检查表单何时被编辑

Question

我试图通过编写表单的某些字段来检查何时编辑我的表单。我读到 $dirty 应该可以完成这项任务，但我不知道我在这里遗漏了什么：

<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form name = "myForm" novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p> is Form dirty? {{isDirty}}<p>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
    $scope.isDirty = $scope.myForm.$dirty;
});
</script>

</body>
</html>

我试图在用户修改表单时将标志 isDirty 设置为 true。谢谢

Answer 1

您的表单字段中缺少 name 属性，这些属性无法为这些字段启用表单验证。您需要为每个字段添加唯一名称，以便将这些字段添加到 myForm object

标记

  <form name="myForm" novalidate>
    First Name:<br>
    <input type="text" name="firstName" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" name="lastName" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>

此外，您正在访问 myForm 对象，它只不过是表单对象，在呈现 DOM 之前，我将不可用，$scope.myForm 将在控制器初始化，如果你真的想从控制器访问 $scope.myForm 那么你需要将该代码放在 $timeout 中，这将在下一个摘要周期中运行 $timeout 函数代码。

  $timeout(function(){
    $scope.isDirty = $scope.myForm.$dirty;
  });

更新

无需维护 单独的 isDirty 标志（这需要更改单独的 isDirty 标志以反映 myForm.$dirty 标志中的任何更改。）相反，我建议您直接使用 $scope.myForm.$dirty 作为标志。所以使用表达式 myForm.$dirty，这个标志会随着表单变脏而改变。

Working Plunkr

在 angularjs 中使用 $dirty 来检查表单何时被编辑

Using $dirty in angularjs in order to check whenever a form is being edited

javascript

forms

form-editing

angularjs