2015-06-30 12 views
15

Ich schreibe eine Webanwendung in angularjs und verwende angular material (nicht sicher, ob das für die Frage relevant ist) und ngMessages, um dem Benutzer eine Rückmeldung über ungültige Eingaben zu geben.Benutzerdefinierte Anweisung mit ngMessages überprüfen

der Regel für die Validierung von Richtlinien vorgesehen ist, kann ich in ähnlicher Weise wie überprüfen:

<md-input-container> 
    <input required name="myInput" ng-model="someModel"> 
    <div ng-messages="formName.myInput.$error"> 
     <div ng-message="required">This field is required.</div> 
    </div> 
</md-input-container> 

Aber wenn ich meine eigene benutzerdefinierte Richtlinie erstellt ...

moduleName.directive('ngCustomdir', function(){ 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function($scope, $element, $attrs, ngModel){ 
      //do some validation 
      return validation; //<--true or false based on validation 
     } 
    }; 
} 

und es in meine Eingabe ...

Ich weiß, dass es die Eingabe validiert, weil, wenn die Eingabe basierend auf m ungültig ist Bei der Überprüfung der benutzerdefinierten Anweisung wird das Feld rot und der Wert für $ invalid wird auf "true" gesetzt, aber ich weiß nicht, wie eine Nachricht mit ngMessages angezeigt werden soll, wenn dies der Fall ist.

<div ng-messages="formName.myInput.$error"> 
    <div ng-message="required">This field is required.</div> 
    <div ng-message="customdir">This is what I need to appear.</div> 
</div> 

Ich kann nicht scheinen, um eine Nachricht zu erhalten, wenn meine Überprüfung der benutzerdefinierten Richtlinie ungültig ist. Wie mache ich das? Danke für die Hilfe im Voraus.

Antwort

21

Sie sind ganz in der Nähe bekommen, fügen Sie einfach eine Validierung in Ihrer link Funktion:

link: function($scope, $element, $attrs, ngModel){ 
     ngModel.$validators.required = function(modelValue) { 
       //true or false based on required validation 
     }; 

     ngModel.$validators.customdir= function(modelValue) { 
       //true or false based on custome dir validation 
     }; 
    } 

Wenn sich das Modell ändert, AngularJS alle Validate Funktionen in $validators Objekt aufrufen wird. Die ng-Nachricht wird basierend auf dem Funktionsnamen angezeigt. Weitere Infomationen über den $ Validatoren:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

+0

Ich habe sehr nützlich, um Ihren Kommentar gefunden. Ich konnte nicht finden, dass dieser Name die ng-Nachrichten haben musste. Vielen Dank – encastellano

2

Es ist kompakte Alternative zu Huy-Lösung:

link: function($scope, $element, $attrs, ngModel){ 
    //validation true or false 
    ngModel.$setValidity('required',validation); 

    ngModel.$setValidity('customdir',validation); 
} 
Verwandte Themen