Discussion :

[OrcusZ]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et voici maintenant la directive

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci d'avance

[OrcusZ]

Bonjour,


Après de l’acharnement, cette ligne de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

scope.createUser.email.$setValidity('email',true);

a résolu mon problème.