Comment forcer ngMessages à afficher les erreurs sans avoir à toucher les entrées - angularjs

Je développe une application Web multi-pages (pas uneSPA angulaire). Dans certains cas, je dois rendre les pages avec des erreurs de validation intégrées (comme une tentative de connexion infructueuse après HTTP POST). Je veux que ces erreurs soient affichées par angulaire lors du chargement de la page. J’ai créé un validateur personnalisé (directive l’a appelé odd pour l'instant). Mais il semble que la seule façon de les afficher est de flouter chaque champ de saisie.

<md-input-container>
<label>Email</label>
<input name="j_username" type="email" ng-model="j_username" odd="false" md-autofocus />
<div ng-messages="login.j_username.$error">
<span ng-message="odd">Some error message prerendered on a server side</span>
</div>
</md-input-container>

Voici un lien vers codepen: http://codepen.io/anon/pen/RGRgoN Cliquez sur email, puis perdez le focus, vous verrez un message d'erreur apparaître.

La question est: comment forcer angular à afficher tous les messages de validation pour tous les champs d’un formulaire lors du chargement de la page?

Réponses:

C’est probablement un raccourci, mais après que j’ai ajouté ce setTimeout à mon validateur personnalisé, des erreurs ont commencé à apparaître au chargement de la page selon les besoins. Si quelqu'un est au courant d'une meilleure solution, faites-le moi savoir!

app.directive("hasVe", function() {
return {
restrict : "A",
require : "ngModel",

link : function(scope, element, attributes, ngModel) {
var hasVe = attributes.hasVe;
ngModel.$validators.hasVe = function(modelValue) {
return hasVe !== "true";
};

// NOTE: This looks like a shortcut, but it works
setTimeout(function() {
ngModel.$touched = true;
scope.$apply();
}, 100);
}
};
});

Voici un extrait mis à jour: http://codepen.io/anon/pen/RGRmpY

Je viens de découvrir ce problème moi-même. Ce fil a été utile: affiche les messages d'erreur de validation sur submit dans angularjs

Ce que vous voulez faire, c'est ajouter ng-show = "login. $ Submit" à votre élément ng-messages. ng-messages seront travaille encore Comme auparavant, des messages d'erreur s'affichent si l'entrée a été "touchée" ou modifiée, mais il ajoute également ce que vous souhaitez, à savoir d'afficher les messages d'erreur si l'utilisateur tente de soumettre.

Lorsqu'un utilisateur tente de soumettre un formulaire, la variable de formulaire angulaire, login. $ soumis, est définie sur true (même si l'envoi a échoué).

<div ng-messages="login.j_username.$error" ng-show="login.$submitted">
<span ng-message="odd">Some error message prerendered on a server side</span>
</div>

Veillez également à inclure ngMessages dans le lancement de votre application: https://docs.angularjs.org/api/ngMessages#module-installation

angular.module("app", ["ngMessages"]);

c'est absolument nécessaire si vous utilisez un matériau angulaire. et vous n’avez même pas besoin d’utiliser le ng-show = "login. $ submit"