[Angularjs] Problème avec directive

Problème avec directive [Angularjs] - Javascript/Node.js - Programmation

Marsh Posté le 13-06-2015 à 11:29:57    

Bonjour,

 

Je suis entrain de faire un site web en utilisant le framework angularjs.

 

Je suis entrain de faire le formulaire d'inscription. Ce formulaire ne peut être envoyé (ng-disable sur le bouton du formulaire ) uniquement si tous les champs sont valides. Le problème c'est que depuis que j'utilise une directive pour vérifier que l'email n'existe pas en base, le bouton du formulaire reste grisé.

 

Par contre les messages pour l'email disparaissent et apparaissent correctement.

 

Voici le formulaire :

 
Code :
  1. <form name="createUser" class="form-horizontal createUserForm" novalidate >
  2.             <h3>Inscription</h3>
  3.             <div class="form-group">
  4.                 <fieldset>
  5.                 <legend>Informations:</legend>
  6.                     <label for="LastName" class="col-md-2 col-sm-2 control-label">Nom</label>
  7.                     <div class="col-md-10 col-sm-10" ng-class="{ 'has-error' : createUser.lastName.$invalid && !createUser.lastName.$pristine }" >
  8.                          <div class="input-group">
  9.                             <input type="text" class="form-control" id="LastName" name="lastName" placeholder="Nom" ng-model="user.LastName" required >
  10.                             <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
  11.                         </div>
  12.                         <p ng-show="createUser.lastName.$invalid && !createUser.lastName.$pristine" class="help-block">Votre nom est obligatoire.</p>
  13.                     </div>
  15.                 </div>
  16.                 <div class="form-group">
  17.                     <label for="FirstName" class="col-md-2 col-sm-2 control-label">Prénom</label>
  18.                     <div class="col-md-10 col-sm-10" ng-class="{ 'has-error' : createUser.firstName.$invalid && !createUser.firstName.$pristine }">     
  19.                         <div class="input-group">
  20.                             <input type="text" class="form-control" id="FirstName" name="firstName" placeholder="Prénom" ng-model="user.FirstName" required >
  21.                             <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
  22.                         </div>
  23.                         <p ng-show="createUser.firstName.$invalid && !createUser.firstName.$pristine" class="help-block">Votre prénom est obligatoire.</p>
  24.                     </div>
  25.                 </div>
  26.                 <div class="form-group">
  27.                     <label for="Email" class="col-md-2 col-sm-2 control-label">E-mail</label>
  28.                     <div class="col-md-10 col-sm-10" ng-class="{ 'has-error' : createUser.email.$error.unique && createUser.email.$error.valid && !createUser.email.$pristine }">
  29.                         <div class="input-group">
  30.                             <input type="email" class="form-control" id="Email" name="email" placeholder="E-mail" ng-model="user.Email" ensure-unique="user.Email" required >
  31.                             <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
  32.                         </div>
  33.                         <span ng-show="createUser.email.$error.valid && !createUser.email.$pristine" class="help-block">Entrer un e-mail valide.</span>
  34.                         <span class="help-block" ng-show="createUser.email.$error.unique && !createUser.email.$pristine">
  35.                            Cette email est déjà utilisé pour un compte
  36.                         </span>
  37.                     </div>
  38.                 </div>
  39.                 <div class="form-group">
  40.                     <label for="Email" class="col-md-2 col-sm-2 control-label">Portable</label>
  41.                     <div class="col-md-10 col-sm-10" ng-class="{ 'has-error' : createUser.phone.$invalid && !createUser.phone.$pristine }">
  42.                         <input type="text" class="form-control" id="Phone" name="phone" placeholder="Portable" ng-model="user.Phone"  ng-pattern="/^((\+|00)33\s?|0)[679](\s?\d{2}){4}$/" >
  43.                         <p ng-show="createUser.phone.$invalid && !createUser.phone.$pristine" class="help-block">Entrer un numéo de téléphone portable valide.</p>
  44.                     </div>
  45.                 </div>
  46.                 <div class="form-group">
  47.                     <label for="Type" class="col-md-2 col-sm-2 control-label">Type</label>
  48.                     <div class="col-md-10 col-sm-10" >
  49.                         <select class="form-control" id="Type" ng-model="user.Type">
  50.                           <option value="Student">&Eacute;tudiant</option>
  51.                           <option value="Professionnal">Professionnel</option>
  52.                           <option value="Other">Autre</option>
  53.                         </select>
  54.                     </div>
  55.                 </div>
  56.                
  57.            
  58.             <div class="form-group">
  59.                     <div class="col-md-4 col-md-offset-5 col-sm-10">
  60.                         <button id="inscriButton" data-style="zoom-in" data-color="blue" type="button" class="ladda-button btn btn-primary" ng-disabled="createUser.$invalid" ng-click="createTask(user)">S'inscrire</button>
  61.                         <p class="connect" >Déjà Inscrit ? <a href="../view/Connexion.html">Connectez-vous</a></p>
  63.                     </div>
  64.             </div>
  66.         </form>
 

et voici maintenant la directive

 
Code :
  1. app.directive('ensureUnique', ['$http', function($http) {
  2.   return {
  3.     scope:  true,
  4.     require: 'ngModel',
  5.     link: function(scope, ele, attrs, ctrl) {
  7.      ctrl.$parsers.unshift(function(viewValue) {
  8.          var email = {
  9.             Mail : viewValue
  10.           }
  11.          var pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  12.          if(pattern.test(viewValue)){
  13.                scope.createUser.email.$setValidity('valid', true);
  14.               $http.post("http://localhost:34423/api/Users/CheckMail",email).success(function(data,status,headers){
  15.                   scope.createUser.email.$setValidity('unique', true);;
  16.                 });
  17.          } else {
  18.             scope.createUser.email.$setValidity('valid', false);
  19.          }
  20.        
  21.      });
  22.     }
  23.   }
  24. }]);
 

Merci d'avance


Message édité par OrcusZ le 13-06-2015 à 12:59:37

---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 13-06-2015 à 11:29:57   

Reply

Marsh Posté le 13-06-2015 à 13:19:25    

Bonjour,
 
 
Après de l’acharnement cette ligne de code
 
scope.createUser.email.$setValidity('email',true);
 
 
à résolu mon problème
 


---------------
Made you your own sentence without believing that of the others...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed