групповая проверка angular 2

Дана простая регистрационная форма:

this.registerForm = this.formBuilder.group({
    email:['', Validators.compose([
    Validators.required,
    Validators.pattern('.+@.+\..+'),
    ]), this.validators.isTaken],
    matchingPassword: this.formBuilder.group({
    password: ['', Validators.compose([
            Validators.required,
            Validators.maxLength(30),
            Validators.minLength(8)
        ])],
    passwordConfirmation: ['', Validators.compose([
            Validators.required,
        ])]
    }, {validator: this.validators.match})
})

Я пытаюсь проверить совпадение подтверждения пароля, поэтому применяю валидатор соответствия для формирования группы. Но теперь я столкнулся с ситуацией, когда само поле отображается как действительное (с зеленой рамкой, потому что все его валидаторы проходят), а групповой валидатор - нет, и мне нужно, чтобы они отображались как красные.

введите здесь описание изображения

Так что я должен изменить ng-valid на ng-invalid вручную или есть какой-то трюк, чтобы исправить это лучше?


angular angular2-forms
person SET    schedule 14.08.2016    source источник
comment
Для вашего конкретного примера я бы поместил настраиваемый параметр MatchingPasswordValidator в поле passwordConfirmation, потому что содержимое этого поля действительно только тогда, когда оно соответствует паролю. Для более общего группового валидатора у меня было бы просто общее сообщение об ошибке для всей группы.   -  person Harry Ninh    schedule 14.08.2016
comment
@HarryNinh, проблема с этим подходом заключается в том, что если я установлю валидатор соответствия на passwordConfirmation, он будет срабатывать только при изменении этого поля. Я имею в виду, что если вы измените поле password так, чтобы оно соответствовало passwordConfirmation, последнее все равно будет помечено как недействительное, потому что для этого поля не выполнялась проверка.   -  person SET    schedule 14.08.2016
comment
Ах, вы можете подписаться на событие valueChanges password для вызова функции passwordConfirmationControl.updateValueandValidity().   -  person Harry Ninh    schedule 14.08.2016
comment
SET, ты нашел решение?   -  person icaro56    schedule 09.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я только что ответил на этот вопрос здесь [1].

В основном angular не предполагает, что вы хотите аннулировать все поля группы, потому что группа недействительна. Вы можете дополнить эту информацию в самом шаблоне.

У меня нет вашего шаблона, но я могу более или менее предположить, что вы можете изменить свои элементы управления, чтобы сделать их недействительными, следующим образом:

<input [ngClass]="{'ng-invalid': registerForm.get('matchingPassword').hasError('nomatch')}" type="text" placeholder="Password" formControlName="password">

<input [ngClass]="{'ng-invalid': registerForm.get('matchingPassword').hasError('nomatch')}" type="text" placeholder="Confirm password" formControlName="passwordConfirmation">

Скорее всего, вам придется изменить заполнители и имя ошибки, возвращаемые пользовательским валидатором match.

[1] FormControl `s вложенной FormGroup являются ng-валидными, хотя FromGroup ng-invalid

person Ben Dadsetan    schedule 23.02.2017