Угловой набор нетронутый не работает, как ожидалось - PullRequest
Новая
       12

Угловой набор нетронутый не работает, как ожидалось

0 голосов
/ 25 апреля 2018

Я пытаюсь создать пользовательскую проверку на одном из моих входов.Все работает как положено, но класс css error все еще применяется.Я попытался с $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>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Почему бы не создать собственный валидатор с помощью директивы? Таким образом, его легко использовать повторно. 

(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>
0 голосов
/ 25 апреля 2018

Вам нужно передать имя вашей формы в 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();
 }

Что я понимаю из этого вопроса ....

...