使用$dirty在AngularJS中检查表单是否正在编辑

Question

使用$dirty在AngularJS中检查表单是否正在编辑

23

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

- DarkAngeL

2

值得注意的是，即使表单上的文本进行编辑和撤消操作，当前值和原始值相同，$dirty 也会变为 true。如果您想确定是否有未保存的更改，则应将原始值与当前值进行比较。 - Bernhard Hofmann

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pankaj Parkar · Accepted Answer

你的表单字段缺少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在控制器初始化时将简单地为未定义。如果你真的想从控制器中访问$scope.myForm，那么你需要把那段代码放在$timeout中，这将在下一个digest周期中运行$timeout函数代码。

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

更新

不需要维护一个单独的isDirty标志（这将要求更改单独的isDirty标志以反映myForm.$dirty标志中的任何更改）。相反，我建议您直接使用$scope.myForm.$dirty作为标志。因此，请使用表达式myForm.$dirty，并且当表单变脏时，此标志将发生变化。

工作范例