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

标签 javascript angularjs forms form-editing

我试图通过写入表单的某些字段来检查何时编辑表单。我读到 $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。谢谢

最佳答案

您的表单字段中缺少 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 将在以下位置简单地未定义 Controller 初始化的时间,如果您确实想从 Controller 访问 $scope.myForm 那么您需要将该代码放入将运行 $timeout 的 $timeout 下一个摘要周期中的功能代码。

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

更新

无需维护单独 isDirty 标志(这需要更改单独的isDirty标志来反射(reflect) myForm.$dirty 标志中的任何更改。)相反,我建议您使用 $scope.myForm.$dirty 直接 作为标志。因此,使用表达式myForm.$dirty,该标志将随着表单变脏而改变。

Working Plunkr

关于javascript - 在 angularjs 中使用 $dirty 来检查何时编辑表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30096083/

相关文章:

javascript - 对于每个LOOP通过JSON.Stringify图像的EXIF数据

JavaScript:停止选择可拖动元素

javascript - 从 AngularJS 中的 Controller 调用 html 页面上的函数

php - 在使用Sqli数据的PHP表单上需要帮助

javascript 模块导出模式

Javascript:尝试从循环中删除选项

javascript - 使用 &lt;iframe&gt; 下载 : works just one time

javascript - 在 AngularJS 上读取 JSON

css - 选择控件的 Bootstrap 跨浏览器问题

Django表单字段中的字符串列表