角度自動検証を使用してカスタム検証を追加

最初にAngular Auto Validateを使用していますが、期待どおりに動作していますが、パスワードを比較するカスタム検証を追加します。角度自動検証を使用してカスタム検証を追加

ここでは実際に私のコードです：

<form role="form" name="changePasswordForm" novalidate="novalidate" ng-submit="changePassword()"> 
    <div class="box-body"> 
    <div class="form-group"> 
     <label for="oldPassword">Old Password</label> 
     <input type="password" class="form-control" id="txtOldPassword" name="oldPassword" ng-model="data.oldPassword" placeholder="Old password" required="required" ng-pattern="/^[A-Za-z]+$/" ng-minlength="6" ng-maxlength="10" ng-pattern-err-type="badOldPassword"> 
    </div> 
    <div class="form-group"> 
     <label for="newPassword">New Password</label> 
     <input type="password" class="form-control" id="txtNewPassword" name="newPassword" ng-model="data.newPassword" placeholder="New password" required="required" ng-pattern="/^[A-Za-z]+$/" ng-minlength="6" ng-maxlength="10" ng-pattern-err-type="badNewPassword"> 
    </div> 
    <div class="form-group"> 
     <label for="confirmNewPassword">Confirm New Password</label> 
     <input type="password" class="form-control" id="txtConfirmNewPassword" name="confirmNewPassword" ng-model="data.confirmNewPassword" placeholder="Confirm new password" required="required" ng-pattern="/^[A-Za-z]+$/" ng-minlength="6" ng-maxlength="10" ng-pattern-err-type="badConfirmNewPassword"> 
    </div> 
    </div> 
    <!-- /.box-body --> 
    <div class="box-footer"> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    </div> 
</form> 

var userApp = angular 
    .module("userModule", ['jcs-autoValidate']) 
    .run(function(defaultErrorMessageResolver) { 
    defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages) { 
     errorMessages['badOldPassword'] = 'Old password must contain only alphabets.'; 
     errorMessages['badNewPassword'] = 'New password must contain only alphabets..'; 
     errorMessages['badConfirmNewPassword'] = 'Confirm password must contain only alphabets.'; 
    }) 
    }) 
    .controller('userController', function($scope, $http, $log) { 
    $scope.data = {}; 

    $scope.changePassword = function() { 
     alert('form submitted'); 
    } 
    });

出典

2016-07-17 Venkatesh Pottabathini

あなたは以下のように、このためのディレクティブを作成する必要があります。

angular.module('app', ['jcs-autoValidate']) 
 
    .controller('mainCtrl', function($scope) { 
 
    
 
    }) 
 
    
 
    .directive('confirmPassword', function(defaultErrorMessageResolver) { 
 
    defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages) { 
 
     errorMessages['confirmPassword'] = 'Please ensure the passwords match.'; 
 
    }); 
 
    
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     scope: { 
 
     confirmPassword: '=confirmPassword' 
 
     }, 
 
     link: function(scope, element, attributes, ngModel) { 
 
     ngModel.$validators.confirmPassword = function(modelValue) { 
 
      return modelValue === scope.confirmPassword; 
 
     }; 
 
    
 
     scope.$watch('confirmPassword', function() { 
 
      ngModel.$validate(); 
 
     }); 
 
     } 
 
    }; 
 
    });

<!DOCTYPE html > 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
    <script src="https://cdn.rawgit.com/jonsamwell/angular-auto-validate/master/dist/jcs-auto-validate.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <div class="container main-content"> 
 
    <form novalidate="novalidate"> 
 
     <div class="form-group"> 
 
     <label for="password">Password</label> 
 
     <input type="password" class="form-control" id="password" placeholder="Password" ng-model="formModel.password" required="" ng-minlength="6" ng-maxlength="12" /> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="exampleInputPassword">Confirm Password</label> 
 
     <input type="password" class="form-control" id="passwordConfirm" placeholder="Confirm Password" ng-model="formModel.confirmPassword" required="" ng-minlength="6" ng-maxlength="12" confirm-password="formModel.password" /> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button class="btn btn-primary" type="submit">Register 
 
     </button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-07-17 18:14:00 developer033

どうもありがとうその加工さ –

角度自動検証を使用してカスタム検証を追加

答えて

関連する問題