在angularjs中使用$ dirty以便在编辑表单时进行检查

I was trying to check whenever my form is being edited by writing some fields of it. I read $dirty should work for that task but I can't figure out what I'm missing here:

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

I'm trying to make the flag isDirty to true whenever the user modifies the form. Thanks

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

1 个解决方案

#1

You are missing name attributes in your form fields which are not enabling form validation for those field. You need to add unique name for each field so that it will get add those field in myForm object

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

Markup

标记

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

Also you are accessing myForm object which is nothing but form object, I won't be available until DOM get rendered, $scope.myForm will be simply undefined at the time of controller initilization, If you really want to access $scope.myForm from controller then you need to put that code in $timeout that will run $timeout function code in next digest cycle.

你也正在访问myForm对象，它只是表单对象，在DOM被渲染之前我将无法使用，$ scope.myForm在控制器启动时将简单地未定义，如果你真的想从$ scope.myForm访问然后你需要将该代码放在$ timeout中，这将在下一个摘要周期中运行$ timeout函数代码。

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

Update

更新

There is no need to maintain a separate isDirty flag (this would require to change the separate isDirty flag to reflect any changes in myForm.$dirty flag.) Instead I suggest you use $scope.myForm.$dirty directly as a flag. So use the expression myForm.$dirty, and this flag will change as form gets dirty.

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

Working Plunkr

工作Plunkr

#1