Question

对angularjs来说是新手。我正在尝试进行表单验证，包括用户名，电子邮件，密码和确认密码，但是当我正确填写所有字段时，仍然禁用提交按钮。任何人都可以帮助我。

<div ng-app="myapp">
   <form name="myForm">
   <label for="email">Email</label>
   <input type="email" id="email" name="email" ng-model="formData.email" required/>
   <span ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
   <span ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>
       <br />
   <label for="email">Name</label>
   <input type="text" id="name" name="name" ng-model="formData.name" required/>
   <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
       <br />
       <label for="username">Username</label>
       <input type="text" id="username" name="username" ng-model="formData.username" ng-minlength="5" ng-maxlength="20" ng-pattern="/^[A-z][A-z0-9]*$/" required  />
   <span ng-show="myForm.username.$error.required && myForm.username.$dirty">required</span>
   <span ng-show="!myForm.username.$error.minLength && !myForm.username.$error.maxLength && myForm.username.$error.pattern && myForm.username.$dirty">Must start with a letter, and contain letters &amp; numbers only.</span>
   <span ng-show="!myForm.username.$error.required && (myForm.username.$error.minlength || myForm.username.$error.maxlength) && myForm.username.$dirty">Username ust be between 5 and 20 characters.</span>
       <br />


       <label for="password">Password</label>
       <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" required  />
   <span ng-show="myForm.password.$error.required && myForm.password.$dirty">required</span>
   <span ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Passwords must be between 8 and 20 characters.</span>

       <br />


       <label for="password_c">Confirm Password</label>
       <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" valid-password-c required  />
   <span ng-show="myForm.password_c.$error.required && myForm.password_c.$dirty">Please confirm your password.</span>
   <span ng-show="!myForm.password_c.$error.required && myForm.password_c.$error.noMatch && myForm.password.$dirty">Passwords do not match.</span>
       <br />

   <button type="submit" class="btn" ng-disabled="!myForm.$valid">Submit</button>
    </form>
   </div>

<script>
var app = angular.module('myapp', ['UserValidation']);

angular.module('UserValidation', []).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.myForm.password.$viewValue
                ctrl.$setValidity('noMatch', !noMatch)
            })
        }
    }
})
</script>

Answer 1

希望这会有所帮助。您应该返回noMatch。

<script>
var app = angular.module('myapp', ['UserValidation']);

angular.module('UserValidation', []).directive('validPasswordC', function () {
return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
        ctrl.$parsers.unshift(function (viewValue, $scope) {
            var noMatch = viewValue != scope.myForm.password.$viewValue
            ctrl.$setValidity('noMatch', !noMatch);
            return (noMatch)?noMatch:!noMatch;
        })
    }
    }
})
</script>

验证无法使用密码并确认密码

1 个答案: