Angularjs Formular-Validierung mit Richtlinien

Habe ich eine überprüfung der Richtlinie genannt valid-number, die verwendet wird, um die Gültigkeit einer form mit $setValidity - dies funktioniert gut für text-Werte, die ich geben in das Eingabefeld, in dem die Richtlinie angewendet, die als ein Attribut.

HTML 

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

In der Richtlinie wird wie folgt

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;
                    });
                }
            };
        });

Jedoch möchte ich auch die Validierung angestoßen werden, und legen Sie die css auf eine ungültige clsss, wenn der Wert der input-box wird initialisiert, wenn die Seite zum ersten mal geladen wird ungültig, wenn ich z.B. set $scope.amount = 'not a number' ich würde erwarten, dass die input-box gehabt zu haben, die Richtlinie angewendet wurde, aber keine Freude. Um für not a number hervorgehoben werden als ungültig ich habe eine änderung vornehmen, um den Inhalt des input-die Auslöser der Richtlinie.

Wie kann ich sicher gehen, dass die Richtlinie gilt unabhängig von der <input> wird initialisiert mit?

Einer vollständigen code-Beispiel ist hier;

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

InformationsquelleAutor GrahamB | 2013-06-09
  1. 16

    $parsers array enthält eine Liste von Funktionen, die angewendet werden, um den Wert, den das Modell bekommt von der Ansicht (was der Benutzer eingibt), und $formatters array enthält die Liste der Funktionen, die angewandt werden, um das Modell Wert ist, bevor es in der Ansicht angezeigt.

    In Ihre Richtlinie Sie korrekt verwendet, die $parsers array ist, aber Sie müssen auch hinzufügen, die $formatters array-wenn Sie möchten, dass der erste Wert überprüft werden:

    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

    • Dies hat Super funktioniert.
    • Wirklich toller post und es hebt wichtige details wie $parsers und $formatters, die schwer zu finden in der Dokumentation.
    • Gerade in komplexen cross-field Validierung und dieser post den Tag gerettet - oder sich einen Tag in ein paar Minuten heh!
    • Sie meinen Tag gerettet. Danke!
    InformationsquelleAutor Stewie
  2. 1

    Können Sie einfach aufrufen von Verifizierungs-Funktion bei der Verlinkung phase, wie in diesem 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();
}
    InformationsquelleAutor Blackhole
  3. 0

    Nachdem (>=) Winkel-1.3.1-version veröffentlicht wurde, die Sie implementieren können, das Verhalten mit ein wenig richtige Weg ist, folgende Winkel-Validierung-Direktiven Stil (z.B. erforderlich, maxlength).

    In diesem Fall müssen Sie hängen Sie Ihre Prüfer als Eigenschaft von $validators array und es gibt keine Notwendigkeit, in $parsers oder $formatters mehr:

    JS:

    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';
};

    CSS:

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

    HTML:

    <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>

    InformationsquelleAutor FSou1
Schreibe einen Kommentar