J'ai ce formulaire de base mis en œuvre à l'aide d'angularjs et de bootstrap:
Le champ de saisie de nom est requis. Lorsque je clique sur le bouton Soumettre, j'ai besoin du champ de saisie pour avoir une frontière rouge si elle est invalide. Comment cela peut-il être fait? Alternativement, si je m'écrase le champ de saisie et qu'il n'est toujours pas valide, ce serait formidable que le cadre rouge soit montré à ce moment-là, au lieu d'attendre le formulaire Soumettre. < / p>
3 Réponses :
twitter bootstrap a une classe error , donc je l'utiliserais en conjonction avec puis dans votre contrôleur, avoir une erreur NG-Class pour le groupe de formulaire, puis une étiquette avec le étiquette et étiquette-danger classes pour une bonne mesure: erreurs objet, et Définissez la propriété nom de ceci sur une chaîne lorsque le nom est invalide.
C'est une solution assez soignée. Merci!
Fondamentalement, vous avez besoin d'une validation angulaire pour prendre la validation, alors ajoutez novalidate code> pour former. Ajoutez également NG-Class Code> à Entrée CODE> FILET pour déterminer si vous pouvez ajouter une erreur CSS <form name="myForm" novalidate ng-submit="test()">
<input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required. </span>
</span>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
La première chose que vous avez manquée était l'ajout J'ajouterais la classe Soumis sur le bouton html CSS J'espère que cela pourrait vous aider, merci. ng-modèle = 'nom' au champ de saisie, alors le formulaire ne sera pas invalide une fois que vous cliquez sur Soumettre, sinon le formulaire sera toujours valide puisque considère qu'il n'y a pas de champ de champ. Soumettre Cliquez sur le bouton, puis mettez la bordure CSS comme .Submitd serait le parent et .ng-invalide serait l'enfant afin que nous puissions mettre le style sur .ng-invalide
Salut @pankaj Parker - Comment faire la même chose si les éléments de formulaire n'ont pas requis étiquette ci-jointe? Par exemple.
I Manager avec ng-classe = "vm.errors.name?" Danger ":" " mais si j'ai beaucoup de champs, je vais devoir l'ajouter à tout ce qui ne se sent pas juste ! Une meilleure solution?