как подтвердить пароль подтверждения используя компонент в angularjs

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 of field, он показывает valid true и error null, но в форме он не тот жев качестве вывода поля, как вы можете видеть, оба дают различный вывод.Пожалуйста, расскажите, где я делаю не так.

Answer 1

Я нашел свое решение

использовать ng-pattern в html вместо pattern, а затем использовать его как ng-required, используемый в компоненте, вот и все