首页 / JAVASCRIPT / javascript-如何在angularjs 1.3中将表单中的特定字段设置为脏

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-如何在angularjs 1.3中将表单中的特定字段设置为脏，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3015字，纯文字阅读大概需要5分钟。

内容图文

我想将特定形式的字段设置为脏字段,因为我正在手动更改该值.我已经使用了SO线程Angular.js programmatically setting a form field to 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并触发验证并显示错误消息.

请帮忙.

解决方法:

迪帕克

这是解决方案为http://plnkr.co/edit/69Beli?p=preview的plnkr.与其直接更新$scope.userData.username并绕过“模型以查看”的解析器管道,不如使用jQuery更新输入字段并触发“ change”事件并使用“查看Angular提供的模型管道.

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

实现了另一个带有$render的plnkr http://plnkr.co/edit/Zct92r.这是供“模型查看”管道使用的,在$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补偿并撤消.

内容总结

以上是互联网集市为您收集整理的javascript-如何在angularjs 1.3中将表单中的特定字段设置为脏全部内容，希望文章能够帮你解决javascript-如何在angularjs 1.3中将表单中的特定字段设置为脏所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/693010.html

来源：【匿名】