web-dev-qa-db-fra.com

Afficher la bordure rouge pour tous les champs invalides après avoir soumis le formulaire angularjs

J'ai un formulaire dans lequel j'ai quelques champs de saisie. Certains d'entre eux sont des champs obligatoires et certains sont des champs email.

J'utilise html5 obligatoire attribut pour les champs obligatoires et type = "email" attribut pour les champs de courrier électronique.

Ma question est après avoir cliqué sur le bouton d'envoi, je dois montrer bordure rouge pour tous les champs non valides.

C'est ma forme

<form name="addRelation">
  <label>First Name</label>
  <input type="text" placeholder="First Name" data-ng-model="model.firstName"     id="FirstName" name="FirstName" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/>
  <label>Last Name</label>
  <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/>
  <label>Email</label>
  <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/>
  <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>

  <input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />  
  </form>

et ma fonction de sauvegarde.

$scope.save= function (model) {
    if ($scope.addRelation.$valid) {
        //form is valid- so save it to DB
    }
    else {
        //if form is not valid set $scope.addRelation.submitted to true
        $scope.addRelation.submitted=true;
    }
};
 })

Maintenant, lorsque je clique sur le bouton Enregistrer sans rien remplir, toutes les erreurs (étendues) sont affichées. Mais je veux montrer une bordure rouge pour tous les champs invalides.

J'ai essayé les cas suivants:

input.ng-dirty.ng-invalid{border:1px solid black;}

mais cela échoue lorsqu'un utilisateur clique directement sur le bouton d'envoi (sans toucher aux champs de saisie)

input.ng-invalid{border:1px solid black;}

cela montre la bordure rouge dès que l'utilisateur ouvre un formulaire d'inscription.

S'il vous plaît aider.

formsvalidationangularjs
39
Ranadheer Reddy

Article de référence: Afficher la bordure de couleur rouge pour les champs de saisie non valables angualrjs

J'ai utilisé ng-class sur tous les champs de saisie.

<input type="text" ng-class="{submitted:newEmployee.submitted}" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/>

lorsque je clique sur le bouton Enregistrer, je modifie newEmployee.submitted la valeur true (vous pouvez le vérifier dans ma question). Ainsi, lorsque je clique sur enregistrer, une classe nommée soumise est ajoutée à tous les champs de saisie (il existe d'autres classes initialement ajoutées par angularjs).

Alors maintenant, mon champ d'entrée contient des classes comme celle-ci

class="ng-pristine ng-invalid submitted"

j'utilise maintenant le code CSS ci-dessous pour afficher une bordure rouge sur tous les champs de saisie non valides (après avoir soumis le formulaire)

input.submitted.ng-invalid
{
  border:1px solid #f00;
}

Je vous remercie !!

Mise à jour:

Nous pouvons ajouter la classe ng à l'élément de formulaire au lieu de l'appliquer à tous les éléments d'entrée. Ainsi, si le formulaire est soumis, une nouvelle classe (soumise) est ajoutée à l'élément de formulaire. Ensuite, nous pouvons sélectionner tous les champs de saisie invalides en utilisant le sélecteur ci-dessous.

form.submitted .ng-invalid
{
    border:1px solid #f00;
}
47
Ranadheer Reddy

vous pouvez utiliser la valeur par défaut ng-submit est définie si le formulaire a été soumis.

https://docs.angularjs.org/api/ng/directive/form

exemple: http://jsbin.com/cowufugusu/1/

11
Alex Zaporozhets

J'ai créé un exemple de travail avec CodePen pour montrer comment atteindre vos objectifs.

J'ai ajouté ng-click au <form> et enlevé la logique de votre bouton:

<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />

Voici le modèle mis à jour:

<section ng-app="app" ng-controller="MainCtrl">
  <form class="well" name="addRelation" data-ng-click="save(model)">
    <label>First Name</label>
    <input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$invalid">First Name is required</span><br/>
    <label>Last Name</label>
    <input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$invalid">Last Name is required</span><br/>
    <label>Email</label>
    <input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span>
    <span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
    <input class="btn" type="submit" value="SAVE" />  
  </form>
</section>

et code du contrôleur:

app.controller('MainCtrl', function($scope) {  
  $scope.save = function(model) {
    $scope.addRelation.submitted = true;

    if($scope.addRelation.$valid) {
      // submit to db
      console.log(model); 
    } else {
      console.log('Errors in form data');
    }
  };
});

J'espère que ça aide.

6
Adam Thomas