2015-06-30 11 views
15

Scrittura di un'app Web in angularjs e utilizzando angular material (non sono sicuro se ciò è pertinente alla domanda) e ngMessages fornire feedback per input non validi per l'utente.Convalidare la direttiva personalizzata utilizzando ngMessages

Di solito, per la validazione delle direttive fornite, posso validare in modo simile a:

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

Ma se ho creato la mia direttiva personalizzato ...

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

e includerlo nel il mio input ...

<input required ng-customdir name="myInput" ng-model="someModel"> 

So che convalida l'input, perché se l'input non è valido basato su m la convalida della direttiva personalizzata, il campo diventa rosso e il valore $ invalid è impostato su true, ma non so come visualizzare un messaggio con ngMessages in base a quando ciò accade.

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

Non riesco a visualizzare un messaggio quando la convalida della direttiva personalizzata non è valida. Come faccio a fare questo? Grazie per l'aiuto in anticipo.

risposta

21

Hai trovato molto vicino, basta aggiungere un po 'di convalida nella funzione link:

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

Quando il modello cambia, AngularJS chiameranno tutte le funzioni Convalida nella $validators oggetto. Il messaggio ng verrà visualizzato in base al nome della funzione. Informazioni ulteriori sui $ validatori:

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

ho trovato molto utile il tuo commento. Non riuscivo a trovare quel nome doveva avere i messaggi di ng. Grazie – encastellano

2

C'è più compatta alternativa alla soluzione di Huy:

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

    ngModel.$setValidity('customdir',validation); 
} 
Problemi correlati