web-dev-qa-db-ja.com

anglejs：ユーザー名が存在するかどうかを確認するカスタムディレクティブ

テキストボックスのユーザー名が記載された登録フォームがあります。ユーザーがユーザー名を入力すると、カスタムディレクティブは、入力されたユーザー名がデータベースに存在するかどうかを確認します。

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);
        });
       });
      });
     }
    }
});

それが存在する場合、私のdiv class = "invalid"は「ユーザー名はすでに存在します」というラベルの付いたhtmlフォームに表示されます。

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>

しかし、現在、彼らは機能していません:-(、私は正しくやっていますか？私がすべきことをアドバイスまたは提案してください。よろしくお願いします。

angularjsangularjs-directiveangular-ngmodel
7
Lee Lee

angle1.3の$ asyncvalidatorsについては、素晴らしい tutorial byyearofmooがあります。フィールドがバックエンドによってチェックされているときに、保留中のステータスを簡単に表示できます。

これが機能しています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>

ng-model-options の使用に注意してください。これは1.3のもう1つの優れた機能です。

編集

これが plnkr で、ディレクティブで$ httpを使用する方法を示しています。 true/false値を含む別の.jsonファイルのみを要求していることに注意してください。ディレクティブはそれに応じてng-modelに有効性を設定します。

16
Nitsan Baleli