2016-08-08 13 views
0

カスタムディレクティブを使用して2つのパスワードフィールドを比較しようとしています。それは何もしていないようで、私はこれをデバッグする方法を知らない。ここに私のコードは次のとおりです。AngularJS compareパスワードフィールド

ディレクティブ:

.directive('pwCheck', [function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
     var firstPassword = '#' + attrs.pwCheck; 
     elem.add(firstPassword).on('keyup', function() { 
      scope.$apply(function() { 
      var v = elem.val()===$(firstPassword).val(); 
      ctrl.$setValidity('pwmatch', v); 
      }); 
     }); 
     } 
    }; 
}]) 

HTML:

<div class="container" ng-controller="Reset"> 

     <!-- P A S S W O R D --> 
     <div class="form-group" ng-class="{'has-error' : reset.password.$invalid && reset.password.$dirty}"> 
      <div> 
      <input type="password" class="form-control" name="password" placeholder="Password" ng-model="resetForm.AngularJS password" required ng-minlength="8"> 
      <span class="help-block has-error" ng-if="reset.password.$dirty"> 
       <span ng-show="reset.password.$error.required">Password is required.</span> 
       <span ng-show="reset.password.$error.minlength">Password must be at least 8 characters.</span> 
      </span> 
      </div> 
     </div> 

     <!-- C O N F I R M P A S S W O R D --> 
     <div class="form-group" ng-class="{'has-error' : reset.confirmPassword.$invalid && reset.confirmPassword.$dirty}"> 
      <div> 
      <input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password" ng-model="resetForm.confirmPassword" required pw-check="reset.password"> 
      <span class="help-block has-error" ng-if="reset.password.$error.pwmatch"> 
       <span ng-show="reset.password.$error.pwmatch">Passwords must match.</span> 
      </span> 
      </div> 
     </div> 

    </div> 
+2

あなたもこれでフィドルを提供することができればいいだろう。人が見て理解するのが簡単 –

+0

私はそれを試してみましょう! – CiscoKidx

+0

'var firstPassword = '#' + attrs.pwCheck;はIDセレクタを作成していますが、そのようなIDは表示されていません。また、その中にドットが付いたIDセレクタもエスケープする必要があります。 'elem.add(firstPassword).length'はおそらく1で' $(firstPassword).length'はおそらくゼロです – charlietfl

答えて

1

私はパスワードフィールドを比較するために、私の看板に次のディレクティブを使用します。このように使用

app.directive('validateIdentical', function ValidateIdenticalDirective(){ 
    return { 
     restrict: 'A' 
     , scope: { 
      expression: '<validateIdentical' 
     } 
     , require: ['ngModel'] 
     , link: link 
    }; 

    function link($scope, $element, $attrs, $controllers){ 
     var $ngModel = $controllers[0]; 

     $ngModel.$validators.identical = function isIdentical(modelValue){ 
      return $scope.expression == modelValue; 
     }; 
    } 
}); 

<form> 
    <label>Password: <input type="password" ng-model="vm.password"></label><br> 
    <label>Confirm: <input type="password" ng-model="vm.confirmPassword" validate-identical="vm.password"></label> 
</form>