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

前端之家收集整理的这篇文章主要介绍了javascript – 在angularjs中使用$dirty,以便在编辑表单时进行检查前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我的表单被编辑的时候,我正在努力检查它的一些领域.我读了$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.谢谢

解决方法

您在表单域中缺少不属于这些字段的表单验证的名称属性.您需要为每个字段添加唯一的名称,以便在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中,将在下一个摘要循环中运行$timeout函数代码.

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

更新

没有必要维护一个单独的isDirty标志(这将需要更改单独的isDirty标志来反映myForm中的任何更改.$dirty标志.)而是建议您使用$scope.myForm.$dirty直接作为标志.所以使用表达式myForm.$dirty,这个标志会随着窗体变脏而改变.

Working Plunkr

原文链接:https://www.f2er.com/js/153361.html

猜你在找的JavaScript相关文章