Zatwierdzanie formularza początkowego Angularjs z dyrektywami

Question

Mam dyrektywę sprawdzania poprawności o nazwie valid-number, która służy do ustawiania ważności formularza za pomocą opcji $ setValidity - działa to dobrze dla wartości tekstowych wpisywanych w polu wprowadzania, do których dyrektywa zastosowała się jako atrybut.

HTML jest

<form name="numberForm"> 
<input name="amount" type="text" ng-model="amount" required valid-number /></form> 

Dyrektywa jest jak postępować

angular.module('test',[]).directive('validNumber',function(){ 
      return{ 
       require: "ngModel", 
       link: function(scope, elm, attrs, ctrl){ 

        var regex=/\d/; 
        ctrl.$parsers.unshift(function(viewValue){ 
         var floatValue = parseFloat(viewValue); 

         if(regex.test(viewValue)){ 
          ctrl.$setValidity('validNumber',true); 
         } 
         else{ 
          ctrl.$setValidity('validNumber',false); 
         } 
         return viewValue; 
        }); 
       } 
      }; 
     }); 

Jednak Chciałbym również walidacji być wyzwalany i ustawić css do nieprawidłowej clsss jeżeli wartość wejścia Box jest inicjalizowany, gdy strona jest załadowana po raz pierwszy, jest nieprawidłowa, np. jeśli ustawię $scope.amount = 'not a number', oczekiwałbym, że pole wejściowe ma zastosowaną dyrektywę, ale nie ma radości. Aby podświetlić not a number jako nieważną, muszę wprowadzić zmiany w treści wejścia, które wyzwala dyrektywę.

W jaki sposób mogę zagwarantować, że dyrektywa będzie obowiązywać niezależnie od tego, czy zainicjowano <input>?

Pełny przykładowy kod jest tutaj;

http://jsfiddle.net/JW43C/5/

Answer 1

$parsers tablica zawiera listę funkcji, które będą stosowane do wartości, które modelu odbiera z widoku (typy użytkowników) i $formatters zawiera listę funkcji, które są stosowane do wartości modelu, zanim zostaną wyświetlone w widoku.

W swoim dyrektywy prawidłowo stosować tablicę $parsers, ale trzeba także dodać tablicę $formatters jeśli chcesz wartość początkowa być zatwierdzone:

angular.module('test',[]).directive('validNumber',function(){ 
    return{ 
    require: "ngModel", 
    link: function(scope, elm, attrs, ctrl){ 
     var regex = /^\d$/; 
     var validator = function(value){ 
     ctrl.$setValidity('validNumber', regex.test(value)); 
     return value; 
     }; 

     ctrl.$parsers.unshift(validator); 
     ctrl.$formatters.unshift(validator); 
    } 
    }; 
}); 

Demo plunker

Answer 2

Możesz po prostu zadzwonić do funkcji weryfikacji podczas fazy łączącej, jak w tym fiddle:

link: function(scope, elm, attrs, ctrl) {      
    var regex=/\d/; 
    var verificationFunction = function(viewValue) { 
     var floatValue = parseFloat(viewValue); 

     if(regex.test(viewValue)) { 
      ctrl.$setValidity('validNumber',true); 
      return viewValue; 
     } 
     else { 
      ctrl.$setValidity('validNumber',false); 
      return undefined; 
     } 
    }; 

    ctrl.$parsers.unshift(verificationFunction); 
    verificationFunction(); 
} 

Answer 3

Po (> =) wprowadzono wersję kątową 1.3.1, którą można zaimplementować w nieco poprawny sposób, zgodnie ze stylem dyrektyw dotyczących walidacji kątowej (np. required, maxlength).

W takim przypadku trzeba dołączyć swoją walidatora jako własność $validators tablicy i nie ma potrzeby w $parsers lub $formatters już:

var app = angular.module('test', []); 
 

 
app 
 
    .directive('validNumber', function() { 
 
    return { 
 
     require: "ngModel", 
 
     link: function(scope, elm, attrs, ctrl) { 
 
     var regex = /^\d+$/; 
 

 
     ctrl.$validators['validNumber'] = function(modelValue, viewValue) { 
 
      return regex.test(viewValue); 
 
     }; 
 
     } 
 
    }; 
 
    }); 
 

 
app.controller('NumberCtrl', NumberCtrl); 
 

 
function NumberCtrl($scope) { 
 
    $scope.amount = '5z'; 
 
};

input.ng-invalid { 
 
    background-color: #FA787E; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
 

 
<div ng-app="test"> 
 
    <div ng-controller="NumberCtrl"> 
 

 
    <div ng-form name="numberForm"> 
 
     <input name="amount" 
 
      type="text" 
 
      ng-model="amount" 
 
      required 
 
      valid-number /> 
 
     
 
     <span ng-show="numberForm.amount.$error.validNumber"> 
 
     Doesn't look like an integer 
 
     </span> 
 
    </div>   
 
    </div> 
 
</div>