问题:

I have my registration form with textbox username. I want to do is when the user enter the username, the custom directive will check if the entered username is exists in the database.

directives.js

angular.module('installApp').directive('pwCheck', function ($http) {   return {     require: 'ngModel',       link: function (scope, elem, attrs, ctrl) {         elem.on('blur', function (evt) {           scope.$apply(function () {           $http({            method: 'GET',            url: '../api/v1/users',            data: {              username:elem.val(),              dbField:attrs.ngUnique            }        }).success(function(data, status, headers, config) {         ctrl.$setValidity('unique', data.status);         });        });       });      }     } });

If it's exists, my div class = "invalid" will shown in the html form with label "Username already exists."

registration.html

    <form name  = "signupform">       <label>{{label.username}}</label>         <input type="text" id = "username" name = "username" ng-model="user.username" class="form-control"></input>         <div class="invalid" ng-show="signupform.username.$dirty && signupform.username.$invalid"><span ng-show="signupform.username.$error.unique">Username already exists.</span>         </div>     </form>

But right now, they are not working :-(,am I doing right? Please advice or suggest me things I should do. Thanks in advance.

回答1:

there is a great tutorial by yearofmoo about $asyncvalidators in angular1.3. it allows you to easily show pending status when the field is being checked by the backend:

here's a working plnkr

app.directive('usernameAvailable', function($timeout, $q) {   return {     restrict: 'AE',     require: 'ngModel',     link: function(scope, elm, attr, model) {        model.$asyncValidators.usernameExists = function() {          //here you should access the backend, to check if username exists         //and return a promise         //here we're using $q and $timeout to mimic a backend call          //that will resolve after 1 sec          var defer = $q.defer();         $timeout(function(){           model.$setValidity('usernameExists', false);            defer.resolve;         }, 1000);         return defer.promise;       };     }   }  });

html:

<form name="myForm">   <input type="text"          name="username"         ng-model="username"          username-available          required         ng-model-options="{ updateOn: 'blur' }">   <div ng-if="myForm.$pending.usernameExists">checking....</div>   <div ng-if="myForm.$error.usernameExists">username exists already</div> </form>

note the use of ng-model-options, another cool feature of 1.3

edit

here's a plnkr that shows how to use $http in the directive. note that it is only requesting another .json file, that contains a true/false value. and the directive will set validity on the ng-model accordingly.

转载请标明出处:angularjs: custom directive to check if a username exists

文章来源: angularjs: custom directive to check if a username exists

标签

directive

angular

exists