Angular ajoute automatiquement la classe 'ng-invalid ' sur les champs' required'
Je construis une application angulaire pour laquelle j'ai mis en place des formulaires. J'ai quelques champs qui doivent être remplis avant la soumission. Par conséquent, j'ai ajouté 'required' sur eux:
<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>
Cependant, lorsque je lance mon application, les champs sont affichés comme 'invalid' et les classes 'ng-invalid 'et' ng-invalid-required ' avant même que le bouton de soumission ait été cliqué ou avant que l'utilisateur n'ait tapé quoi que ce soit dans les champs.
Comment puis-je m'assurer que ces 2 classes ne sont pas ajoutées immédiatement mais une fois que l'utilisateur a soumis le formulaire, ou quand il a tapé quelque chose de mal dans le champ correspondant?
5 réponses
Puisque les entrées sont vides et donc invalides lorsqu'elles sont instanciées, Angular ajoute correctement la classe ng-invalid.
Une règle CSS que vous pourriez essayer:
input.ng-dirty.ng-invalid {
color: red
}
Qui indique essentiellement quand le champ a été entré à un moment donné depuis que la page a été chargée et n'a pas été réinitialisé par $scope.formName.setPristine(true) et quelque chose n'a pas encore été entré et c'est invalide alors le texte tourne red.
Autres classes utiles pour des formes Angulaires (voir entrée pour référence future )
ng-valid-maxlength - lorsque ng-maxlength passeng-valid-minlength - lorsque ng-minlength passeng-valid-pattern - lorsque ng-pattern passeng-dirty - lorsque le formulaire a eu quelque chose d'entrées depuis le formulaire de chargementng-pristine - lorsque le formulaire de saisie a rien eu inséré depuis chargé (ou qu'il a été réinitialisé via setPristine(true) sur la forme)ng-invalid - lors de la validation échoue (required, minlength, personnalisés, etc)
De même, il y a aussi ng-invalid-<name> pour tous ces modèles et tous les modèles personnalisés créés.
Grâce à ce post, j'utilise ce style pour supprimer la bordure rouge qui apparaît automatiquement avec bootstrap lorsqu'un champ obligatoire est affiché, mais l'utilisateur n'a pas eu la chance de saisir quoi que ce soit déjà:
input.ng-pristine.ng-invalid {
-webkit-box-shadow: none;
-ms-box-shadow: none;
box-shadow:none;
}
Comme les champs sont vides, ils ne sont pas valides, les classes ng-invalid et ng-invalid-required sont ajoutées correctement.
, Vous pouvez utiliser la classe ng-pristine pour vérifier si les champs ont déjà été utilisés ou non.
Essayez d'ajouter la classe pour la validation dynamiquement, lorsque le formulaire a été soumis ou que le champ n'est pas valide. Utilisez le nom du formulaire et ajoutez l'attribut 'name' à l'entrée. Exemple avec Bootstrap:
<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
<label class="col-sm-2 control-label" for="username">Username*</label>
<div class="col-sm-10 col-md-9">
<input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
</div>
</div>
Il est également important que votre formulaire ait l'attribut ng-submit="":
<form name="myForm" ng-submit="checkSubmit()" novalidate>
<!-- input fields here -->
....
<button type="submit">Submit</button>
</form>
Vous pouvez également ajouter une fonction optionnelle pour la validation au formulaire:
//within your controller (some extras...)
$scope.checkSubmit = function () {
if ($scope.myForm.$valid) {
alert('All good...'); //next step!
}
else {
alert('Not all fields valid! Do something...');
}
}
Maintenant, lorsque vous chargez votre application la classe 'a-erreur" ne sera ajouté lorsque le formulaire est soumis, ou le domaine a été touché.
Plutôt:
!myForm.utilisateur.$vierges
Vous pouvez également utiliser:
myForm.utilisateur.$sale
La réponse acceptée est correcte.. pour mobile, vous pouvez également utiliser ceci (ng-touché plutôt ng-sale)
input.ng-invalid.ng-touched{
border-bottom: 1px solid #e74c3c !important;
}