Angular set pristine 无法按预期工作答案

【问题标题】：Angular set pristine doesn't work as expectedAngular set pristine 无法按预期工作
【发布时间】：2018-04-25 23:19:33
【问题描述】：

我正在尝试对我的一个输入创建自定义验证。一切都按预期工作，但仍然应用错误 css 类。我试过$setPristine() 和$setUntouched() 首先在输入上（不起作用），然后在表单上。完美的解决方案是如果我可以在 ng-change 中重置样式。

self.changeTransferNumber = function () {   
  if (validateRoutingNumber(self.bankTransferNumber)) {
    self.bankInfoForm.bankTransferNumber.$error.validateTransferNumber = false;
    self.bankInfoForm.$setPristine();
    self.bankInfoForm.$setUntouched();
  } else {
    self.bankInfoForm.bankTransferNumber.$error.validateTransferNumber = true;
  }
}

    <form name="$ctrl.bankInfoForm" novalidate ng-submit="$ctrl.saveInfo($event)">
    <input type="text" ng-model="$ctrl.bankTransferNumber" ng-disabled="$ctrl.disableTextEdit" name="bankTransferNumber" required ng-change ="$ctrl.changeTransferNumber()"/>
    <div ng-messages="$ctrl.bankInfoForm.bankTransferNumber.$error" ng-show="$ctrl.bankInfoForm.bankTransferNumber.$dirty">                                                   
    	<div ng-message = "validateTransferNumber" >The transfer number is not correct</div>
    </div>
</form>

【问题讨论】：

能否提供完整的html表单
您是否考虑编写验证指令而不是使用这些指令？只是一个报价

标签： angularjs angularjs-material

【解决方案1】：

您需要在 html 中传递您的表单名称：-

 <form role="form"  name="Form" id="Form" ng-submit="Form.$valid && saveFormData($event,Form)" novalidate  autocomplete="off">

在您的控制器 /js 文件中：-

 $scope.saveFormData = function (event,myForm) {
           //after your whole logic
           ....
           //to reset form
           myForm.$setPristine();
 }

我从这个问题的理解......

【讨论】：

谢谢。我正在尝试重置 ng-change 中的 css 样式

【解决方案2】：

为什么不使用指令创建自定义验证器？这种方式很容易重复使用。

(function() {
	'use strict';
  
  angular.module('myApp', []);
  
  angular.module('myApp').controller('MyController', MyController);
  
  MyController.$inject = [];
  function MyController() {
  	var main = this;
    
    main.routingNumber = '2';
  }
  
  angular.module('myApp').directive('validateRoutingNumber', function() {
  	return {
    	restrict: 'A',
      require: {ngModel: ''},
      bindToController: true,
      controllerAs: '$dir',
      controller: function() {
      	var $dir = this;
        
        $dir.$onInit = function() {
          createValidators();
        };
        
        function createValidators() {
          $dir.ngModel.$validators.routingNumber = function(modelValue, viewValue) {
            var value = modelValue || viewValue;
            //without this if-else it would become a required field
            if (value) {
            	return value.toString().length >= 3 && value.toString().indexOf('1') !== -1; 
            } else {
            	return true; 
            }
            
          }
        }
        
      }
    };
  });
  
}());

input.ng-invalid {
  border: 1px red solid;
  background-color: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyController as main">
    <form name="frmMain">
      <input type="text" ng-model="main.routingNumber" name="routingNumber" validate-routing-number>
      <span ng-if="frmMain.routingNumber.$invalid">Needs to have at least three characters and at least one '1'</span>
    </form>
  </div>
</body>

【讨论】：