angularjs: diretiva personalizada para verificar se existe um nome de usuário

Eu tenho meu formulário de registro com o nome de usuário da checkbox de texto. Eu quero fazer é quando o usuário digitar o nome de usuário, a diretiva personalizada irá verificar se o nome de usuário inserido é existe no 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); }); }); }); } } }); 

Se ele existir, minha div class = "invalid" será mostrada no formulário html com o label “O nome de usuário já existe”.

registration.html

     
Username already exists.

Mas agora, eles não estão trabalhando :-(, estou fazendo certo? Por favor, conselhos ou me sugerir coisas que devo fazer. Obrigado antecipadamente.

Há um ótimo tutorial por yearofmoo sobre $ asyncvalidators em angular1.3. Ele permite que você mostre facilmente o status pendente quando o campo está sendo verificado pelo backend:

aqui está um plnkr de trabalho

 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:

 
checking....
username exists already

observe o uso de ng-model-options , outro recurso interessante de 1.3


editar

aqui está um plnkr que mostra como usar $ http na diretiva. Observe que ele está solicitando apenas outro arquivo .json, que contém um valor verdadeiro / falso. e a diretiva estabelecerá validade no modelo ng de acordo.

Intereting Posts