Question

这是我的js文件代码

.component("password", {
require: {ngModelCtrl: 'ngModel'},
template: '<input type="{{$ctrl.type}}" class="{{$ctrl.classname}}" placeHolder="{{$ctrl.placeholder}}" name="{{$ctrl.name}}" ng-required="{{$ctrl.ngRequired}}" ng-minlength="4" ng-maxlength="20" ng-model="$ctrl.ngModel"' +
        'ng-change="$ctrl.ngModelChange()">' +
        '<div ng-if="$ctrl.formref[$ctrl.name].$touched" ng-messages="$ctrl.formref[$ctrl.name].$error">' +
        '<div  class="alert alert-danger" ng-message="required">You did not enter Password</div>' +
        '<div  class="alert alert-danger" ng-message="minlength"> {{$ctrl.placeholder}} longer than 4 chars</div>' +
        '<div  class="alert alert-danger" ng-message="maxlength"> {{$ctrl.placeholder}} should have at most 8 characters.</div>' +
        '</div>',

bindings: {
    formref: '<',
    name: '@',
    placeholder: '@',
    classname: '@',
    type: '@',
    ngRequired: '@',
    ngModel: '<'
},
controller: function () {
    this.ngModelChange = () => {
        this.ngModelCtrl.$setViewValue(this.ngModel);
    };
}
}).component("confirmPassword", {

require: {ngModelCtrl: 'ngModel'},
template: '<input type="password" class="{{$ctrl.classname}}" placeHolder=" 
{{$ctrl.placeholder}}" name="{{$ctrl.name}}" ng-model="$ctrl.ngModel"' +
        'ng-change="$ctrl.ngModelChange()" ng-pattern="$ctrl.pattern" ng- 
required="{{$ctrl.ngRequired}}"/>'+
        '<div ng-if="$ctrl.formref[$ctrl.name].$touched" ng- 
messages="$ctrl.formref[$ctrl.name].$error">' +
        '<div  class="alert alert-danger" ng-message="required" >You did not 
enter {{$ctrl.placeholder}}</div>' +
        '<div  class="alert alert-danger" ng-message="pattern" >Your 
passwords did not match</div>' +
        '</div>',

bindings: {
    formref: '<',
    name: '@',
    placeholder: '@',
    classname: '@',
    type: '@',
    ngRequired: '@',
    pattern: '=',
    ngModel: '<'
},
controller: function () {
    this.ngModelChange = () => {
        this.ngModelCtrl.$setViewValue(this.ngModel);
    };
}

});

这是html文件的代码

<form name="signUp" novalidate="novalidate">
<password classname="form-control" name="Password" ng-model="pass" type="Password" placeholder="Password" formref="signUp" ng-required="true"></password>              
                 <confirm-password classname="form-control" name="confirm_password" type="password" placeholder="Comfirm Password" ng-model="confirm_password" formref="signUp" pattern="pass" ng-required="true"></confirm-password>
</form>

问题是输入字段中没有错误，但仍显示表单。$ valid属性为false。我花了很多次，但没有找到解决方案。我在下面提供我的代码输出，以清楚地了解我的问题

signUp.Password.$valid = true
signUp.confirm_password.$valid = true
signUp.Password.$error = {}
signUp.confirm_password.$error.pattern = 
signUp.confirm_password.$viewValue = qwerty
signUp.$valid = false
signUp.$error = {"pattern": 
[{"$viewValue":"qwerty","$modelValue":"qwerty","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":false,"$invalid":true,"$error":{"pattern":true},"$name":"confirm_password","$options":{}}]}

当我显示字段的$ error和$ valid时，它显示有效的true和error null，但形式上与字段的输出不同，因为您可以看到两者给出的输出不同。请告诉我我在哪里做错了。

Answer 1

我找到了解决方法

在html中使用ng-pattern而不是使用pattern，然后将其用作ng-required在组件中使用，就是这样

如何使用angularjs中的组件验证确认密码

1 个答案: