Concilier Angular.js et Bootstrap style de validation de formulaire

Question

Je suis à l'aide Angulaire avec Bootstrap. Voici le code de référence:

<form name="newUserForm" ng-submit="add()" class="" novalidate>
    <input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td>
    <button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button>
</form>

Bootstrap a des styles pour les champs non valides dans la forme d' input:invalid {.... }; ces coup de pied dans quand le champ est vide. Maintenant j'ai aussi quelques filtrage via Angulaire. Cela crée de l'étrange cas quand ":invalid" est éteint, mais ".ng-invalide" est activée, ce qui m'obligerait à re-mettre en œuvre des classes CSS de bootstrap pour l' ".ng-invalide" de la classe.

Je vois deux options, mais la difficulté avec les deux

• Faire Angulaire utiliser certaines personnalisé classname au lieu de "ng-valide" (je ne sais pas comment le faire).
• Désactiver la validation html5 (je pense que c'est ce "novalidate" attribut dans la balise form devriez faire, mais il ne fait pas).

Le Angulaires-Bootstrap directives de là-bas ne couvre pas le style.

Answer 1

Utilisez classe « erreur » de Bootstrap pour le coiffage. Vous pouvez écrire moins de code.

Answer 2

Les classes ont été modifiés dans 3 Bootstrap :

Notez les guillemets autour de et : a pris un certain temps pour trouver qui...

Answer 3

Une autre solution : créer la directive qui bascule `` classe selon un enfant d’entrée.

puis simple l’utiliser dans le modèle

Answer 4

Améliorations mineures à la réponse de @farincz. Je suis d’accord qu’une directive constitue la meilleure approche ici, mais je ne voulais pas avoir à le répéter sur chaque élément, donc j’ai mis à jour le code pour permettre l’ajout à soit le ou au parent élément (qui l’ajoutera à tous contenus éléments) :

Answer 5

Améliorations mineures à la réponse de @Andrew Smith. J’ai changer les éléments d’entrée, et à l’aide de « require » mot-clé.