如何在angularjs 1.3中将表单中的特定字段设置为dirty

How to set a particular field in a form to dirty in angularjs 1.3

本文关键字：字段 设置 dirty angularjs 表单      更新时间：2023-09-26

我想将特定表单的字段设置为脏字段，就像手动更改该值一样。我已经使用了SO线程Angular.js，通过编程将表单字段设置为dirty，但运气不好。

这是我这期的样本复制品。Plunk

<html ng-app="sampleApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0- rc.4/angular.min.js"></script>
 <style type="text/css">
 input.ng-invalid {
  border: 1px solid red;
 }
input.ng-valid {
  border: 1px solid green;
}
input.ng-pristine {
  border-color: #FFFF00;
}
</style>
<script type="text/javascript">
 var sampleApp = angular.module("sampleApp", []);
 sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout',
   function($scope, $http, $timeout) {
     $scope.userData = {
       username: "",
     };
     $timeout(function() {
       $scope.userData.username = '$#deepak';
     }, 5000);
   }
 ]);
 sampleApp.directive('myUsername', [
   function() {
     // Runs during compile
     return {
       require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent 
       link: function($scope, iElm, iAttrs, controller) {
         controller.$parsers.unshift(function(value) {
           //allow only alphanumeric characters
           var reg = /^'w+$/;
           var isValidUsername = reg.test(value);
           controller.$setValidity('username', isValidUsername);
           return isValidUsername ? value : undefined;
         });
         controller.$formatters.unshift(function(value) {
           var reg = /^'w+$/;
           var isValidUsername = reg.test(value);
           controller.$setValidity('username', isValidUsername);
          $scop  e.registrationForm.username.$setViewValue($scope.registrationForm.username.$viewValue);
           return value;
         })
       }
     };
   }
 ]);
  </script>
  </head>
 <body ng-controller="sampleCtrl">
  <div ng-show="bShowStatus">
   {{message}}
   <ul ng-repeat="err in errors">
     {{err}}
   </ul>
  </div>
  <form name="registrationForm" ng-submit="submitForm()" novalidate>
    UserName
    <br>
    <input type="text" name="username" ng-model="userData.username" ng-model-options="{updateOn:  'blur'}" my-username>&nbsp;&nbsp;
    <span ng-show="registrationForm.username.$dirty && registrationForm.username.$error.username">
            Invalid Username.
        </span>
 <br>
 <br>
 <input type="submit" value="Submit">
 </form>
</body>
</html>

在示例中，我在5秒钟后修改用户名（仅用于示例）。同时，我想将字段设置为dirty，并启动验证并显示错误消息。

请帮忙。

Deepak

这是带有解决方案的plnkrhttp://plnkr.co/edit/69Beli?p=preview.与其直接更新$scope.userData.username并绕过"模型到视图"的解析器管道，不如使用jQuery更新输入字段并触发"更改"事件，并使用Angular提供的"视图到模型"管道。

            $timeout(function(){
              jQuery("[name=username]").val('$#deepak');
              jQuery("[name=username]").trigger('change');
            }, 5000);

另一个plnkrhttp://plnkr.co/edit/Zct92r实现了$render。这是针对"模型到视图"管道，在$parser之后调用$render，并根据错误设置样式。

    controller.$render = function() {
      console.log('in render');
      iAttrs.$set('value', controller.$viewValue);
      if (controller.$invalid && controller.$viewValue.length !== 0) {
        iElm.css("border", "1px solid red");
      } else if (controller.$viewValue.length === 0) {
        iElm.css("border", "1px solid gold");
      } else {
        iElm.css("border", "1px solid green");
      }
    };

这两种解决方案都感觉像是破解，$render感觉更像。无论在$render中设置了什么，都必须在$parser中进行补偿并撤消。

好吧，使用线程中讨论的$dirty标志（Angular.js通过编程将表单字段设置为dirty）对我来说很有效：

$timeout(function(){
    $scope.userData.username = '$#deepak';
    $scope.registrationForm.username.$dirty = true;
}, 5000);

请参阅此处的工作plunker：http://plnkr.co/edit/ZvX62jJsklPLyw7Q4nlT?p=preview

相关文章：