Ich habe einige Richtlinien erstellt, die mir helfen in Form Eingabe Gültigkeit zu überprüfen, die mehr oder weniger wie folgt aussehen:Eingabevalidierungsfehler von innen Richtlinie abrufen
app.directive("initialDate", function(){
return{
require: '?ngModel',
restrict:"A",
link:function(scope, element, attrs, ngModel){
scope.$watch(attrs.ngModel, function() {
validate();
});
attrs.$observe('initialDate', function() {
validate();
});
var validate = function() {
var date = Date.parse(ngModel.$viewValue);
var initialDate = Date.parse(attrs.initialDate);
ngModel.$setValidity('initial-date', date >= initialDate);
}
}
}
});
Nun, ich möchte benutzerdefinierte Nachrichten auf Eingaben hinzufügen, selects, etc .., die die Validierung nicht bestehen, aber ich möchte nicht eins nach dem anderen hinzufügen, indem ich einen Bereich oder etwas mit ng-if hinzufüge (das ist eine Menge Arbeit, die ich vermeiden will).
Mein erster Versuch war, eine Richtlinie wie diese zu erstellen:
app.directive("ngInvalid", function(){
restrict:"C",
...
});
aber das nicht funktioniert, so jetzt ich versuche diese
app.directive("input", function(){
return {
require:"?ngModel",
link:function(scope, element, attrs, ctrl){
scope.$watch(function() {
return element.attr('class');
}, function(newVal, oldVal){
if (newVal == oldVal) return;
if (element.hasClass("ng-invalid")){
element.parent().append("<span class = 'error' style='color:red'>There was an error</span>");
}else{
element.parent().find(".error").remove();
}
});
}
}
});
Also, diese funktioniert (mehr oder weniger, es braucht mehr Arbeit, hehe), aber ich muss einen für selects, textareas, etc .. erstellen und einige Prüfungen für jede Art von Fehler machen, wenn ich benutzerdefinierte Nachrichten anzeigen möchte.
Außerdem sieht es wirklich schmutzig für mich aus. Ich glaube wirklich, dass es muss etwas sein, das ich in der Richtlinie tun könnte, die mehr sah wie folgt aus:
...
link:function(scope, element, attrs, ctrl){ /***element is the input or select or textarea... ***/
if (!element.$isValid){
switch (element.$validationErrors[0]){
case "emailValidation": element.parent().append("<span class = 'error' style='color:red'>Email format not correct</span>"); break;
case "initialDate": element.parent().append("<span class = 'error' style='color:red'>Date cannot be previous to {{initialDate}}</span>"); break;
case "pattern": element.parent().append("<span class = 'error' style='color:red'>Format incorrect</span>"); break;
}
}
}
...
Ich habe in der Dokumentation und Navigation einige Fragen, suchen aber vor allem habe ich Lösungen gefunden, die verwenden, erfordern der Formular-Controller, und das möchte ich vermeiden.
Gibt es einige Methoden, die es mir ermöglichen, den Fehler von einer Eingabe abzurufen?
EDIT
Um deutlich zu machen, sagen wir mal, dass die Eingänge in einem Formular-Tag nicht eingewickelt werden, sondern ein div oder sonst etwas. Wie würde ich auf jeden Fehler innerhalb der Eingabedirektive zugreifen?
Schauen Sie sich die NG-Nachrichten an: – dewd
Scheint gut, löst aber nicht die zwei Dinge, die ich erreichen möchte: nicht abhängig von der Verwendung des Formulars und dem Erstellen einer Komponente für jeden Eingang, wenn ich einen Anzeigefehler für jedes Feld anzeigen möchte . – sergio0983