web-dev-qa-db-fra.com

Angular ajoute automatiquement la classe 'ng-invalid' sur les champs 'required'

Je construis une application angulaire pour laquelle j'ai quelques formulaires mis en place ... J'ai quelques champs qui doivent être remplis avant la soumission. Par conséquent, j'ai ajouté «requis» sur eux:

<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>

Toutefois, lorsque je lance mon application, les champs sont affichés comme "invalides" et les classes "ng-invalid" et "ng-invalid-required" avant même que le bouton d'envoi ait été cliqué ou avant que l'utilisateur n'ait saisi 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 lorsqu'il a tapé une erreur dans le champ correspondant?

javascriptformsangularjsrequired
29
Spearfisher

Grâce à ce message, 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 encore eu l'occasion de saisir quoi que ce soit:

input.ng-pristine.ng-invalid {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow:none;
}
6
user2344489

Comme les champs sont vides, ils ne sont pas valides. Les classes ng-invalid et ng-invalid-required sont donc ajoutées correctement.

Vous pouvez utiliser la classe ng-pristine pour vérifier si les champs ont déjà été utilisés ou non.

1
Minko Gechev

Essayez d'ajouter la classe à la validation de manière dynamique, 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 facultative de 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...');
    }

 }

Désormais, lorsque vous chargez votre application, la classe 'has-error' n'est ajoutée que lorsque le formulaire est soumis ou que le champ a été touché. Au lieu de:
! myForm.username. $ pristine

Vous pouvez aussi utiliser:
myForm.username. $ dirty

0
grindking