angularjs中的表单验证和提交[重复]

Question

我有 html 文件：

<form role="form"  ng-submit="resetPasswordRequest();" name="resetPasswordForm" novalidate>


    <div  ng-show="!sessionExpired">

          <input type="password" ng-model="password" ng-focus  placeholder="New Password" name ="password" autofocus   ng-minlength="5" ng-maxlength="20"  required />
              <span  ng-show="resetPasswordForm.password.$error.required && submitted">New Password Required</span><br>
              <span  ng-show="resetPasswordForm.password.$error.minlength">New Password should contain at least 5 characters </span><br>
              <span  ng-show="resetPasswordForm.password.$error.maxlength">New Password  maximum length up to 20  characters only </span><br>


          <input type="password" ng-model="resetPassword" ng-focus  placeholder="Retype Password" name ="resetPassword" id ="resetPassword" autofocus  required/>
              <span  ng-show="resetPasswordForm.resetPassword.$error.required && submitted">Retype Password Required</span><br>
              <span ng-show="!resetPasswordForm.resetPassword.$error.required && resetPassword != password && submitted">Password not matching</span><br>

        <br><button type="submit" class="login-btn" ng-click="submitted=true">SUBMIT</button><br>
    </div>
    <div  ng-show="sessionExpired">
        <p class="txt-bld error-message" >URL Expired</p>
    </div>
</form>

我有控制器：

$scope.resetPasswordRequest = function(){
//valid form submission  only process the logic
if($scope.resetPasswordForm.$valid){ //some logic }
}

使用上面的表单我可以验证表单密码字段 minlength,maxlenth,empty，但是密码和重新输入密码数据匹配大小写的问题。 <span ng-show="!resetPasswordForm.resetPassword.$error.required && resetPassword != password && submitted">Password not matching</span>

即使通过密码和重新输入密码的数据不匹配表单提交并调用控制器功能并处理控制器逻辑。 但是，如果表单中缺少任何验证，则重新输入和密码数据匹配情况正在工作，如果没有验证（最小，最大长度，空）没有发生（表格中的所有内容都是正例）密码并重新输入密码数据匹配不起作用。

如果没有外部指令，我如何验证表单密码并重新键入匹配最小长度、最大长度属性的密码数据。

Answer 1

您可以创建一个简单的指令来检查密码是否匹配。根据指令返回的结果，可以设置第二个密码字段的有效性。

示例 HTML

<input type="password" id="password1" name="password1" ng-model="password1" required/>
<input type="password" id="password2" name="password2" ng-model="password2" required check-passwords="password1" />

示例 JS

ngAppModule.directive('checkPasswords', [function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attributes, ctrl) {

            // get the value of the attribute. In this case, it will be "password1"
            var firstPwd = '#' + attributes.checkPasswords;
            element.add(firstPwd).on('keyup', function () {
                scope.$apply(function () {
                    var isValid = element.val() === $(firstPwd).val();
                    // use "pwdsMatch" in "ng-show" along with the other validations
                    ctrl.$setValidity('pwdsMatch', isValid);
                });
            });
        }
    };
}]);