OrcusZ Pro AMD | .Net lover | 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 :
- <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">É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">
- <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>
- <p class="connect" >Déjà Inscrit ? <a href="../view/Connexion.html">Connectez-vous</a></p>
- </div>
- </div>
- </form>
|
et voici maintenant la directive Code :
- 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
Message édité par OrcusZ le 13-06-2015 à 12:59:37
---------------
Made you your own sentence without believing that of the others...
|
