在 angularjs 中使用 $dirty 以检查何时正在编辑表单答案

【问题标题】：Using $dirty in angularjs in order to check whenever a form is being edited在 angularjs 中使用 $dirty 以检查何时正在编辑表单
【发布时间】：2015-07-17 17:33:51
【问题描述】：

我试图通过编写一些字段来检查我的表单是否正在被编辑。我读到 $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。谢谢

【问题讨论】：

值得注意的是，即使当前值和以前的值相同，编辑和撤消表单上的文本也会导致$dirty 为真。如果要确定是否有未保存的更改，则应将原始更改与当前进行比较。

标签： javascript angularjs forms form-editing

【解决方案1】：

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

标记

  <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 在控制器初始化时将简单地未定义，如果您真的想访问 @来自控制器的 987654327@ 然后您需要将该代码放入 $timeout 中，这将在下一个摘要循环中运行 $timeout 功能代码。

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

更新

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

Working Plunkr

【讨论】：

我只是尝试按照您的建议进行修改，添加名称属性，但它不起作用。我不断收到同样的错误：--> TypeError: Cannot read property '$dirty' of undefined
感谢 Plunkr 但是，我刚刚尝试过，只能看到 isDirty 变量的错误值，我希望一旦用户开始修改表单的某些字段，它就会变为 true，有没有办法做到这一点？
@DarkAngeL 你的 html 将只是 <p> is Form dirty? {{myForm.$dirty}}<p> 不需要额外的变量
@DarkAngeL 很高兴为您提供帮助，谢谢
@PankajParkar 这很好，但我怎样才能使用 javascrcipt/angular 来始终查看 Plunkr 中 myForm.$dirty 的值？在您的 Plunkr 中，我刚刚编辑了这个 `$timeout(function(){ $scope.isDirty = $scope.myForm.$dirty; alert($scope.isDirty); });` 但仅在页面第一次加载时有效。当我编辑表格时，我什么也得不到。谢谢