Я прихожу к вам за разговором о проблеме с угловым материалом. На самом деле, я думаю, что это проблема, но я предпочитаю сначала искать недоразумения.
Первое, что касается моей проблемы, это контекст, я пытаюсь сделать простую форму, содержащую два входа: пароль и его "подтверждение".
пользовательский form.component.ts
this.newUserForm = this.fb.group({
type: ['', Validators.required],
firstname: ['', Validators.required],
lastname: ['', Validators.required],
login: ['', Validators.required],
matchingPasswordsForm: this.fb.group(
{
password1: ['', Validators.required],
password2: ['', Validators.required],
},
{
validator: MatchingPasswordValidator.validate,
},
),
mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
cbaNumber: [
'411000000',
[Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
],
phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
}
Я интересуюсь совпадениемPasswordsForm FormGroup. Вы можете увидеть на нем валидатор.
Здесь валидатор:
согласующие-password.validator.ts
export class MatchingPasswordValidator {
constructor() {}
static validate(c: FormGroup): ValidationErrors | null {
if (c.get('password2').value !== c.get('password1').value) {
return { matchingPassword: true};
}
return null;
}
}
и HTML.
пользователя form.component.html
<div class="row" formGroupName="matchingPasswordsForm">
<mat-form-field class="col-md-6 col-sm-12">
<input matInput placeholder="Mot de passe:" formControlName="password1">
<mat-error ngxErrors="matchingPasswordsForm.password1">
<p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
</mat-error>
</mat-form-field>
<mat-form-field class="col-md-6 col-sm-12">
<input matInput placeholder="Confirmez" formControlName="password2">
<mat-error ngxErrors="matchingPasswordsForm.password2">
<p ngxError="required" [when]="['dirty', 'touched']">{{requiredMessage}}</p>
</mat-error>
<!-- -->
<!-- problem is here -->
<!-- -->
<mat-error ngxErrors="matchingPasswordsForm" class="mat-error">
<p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-error>
<!-- ^^^^^^^^^^^^^^^^ -->
<!-- /problem is here -->
<!-- -->
</mat-form-field>
</div>
Я окружил интересный код комментариями.
Теперь, некоторое объяснение: с тегом, когда коснулся пароль2, отображается моя ошибка:
Но, когда я пишу неправильный пароль, ошибка больше не отображается:
Сначала я думал, что ошибаюсь в использовании пользовательских валидаторов. НО, когда я заменяю все, все работает отлично!
заменить ошибку подсказкой
<mat-hint ngxErrors="matchinghPasswordsForm">
<p ngxError="matchingPassword" [when]="['dirty', 'touched']">{{passwordMatchErrorMessage}}</p>
</mat-hint>
Надеюсь, что я был ясен, я действительно хочу вашу точку зрения, прежде чем опубликовать вопрос о материальном дизайне github.
Если я что-то проигнорировал, пожалуйста, зажгите мой огонь по тому, что я пропустил.
Последнее, мои тесты проводились с ngxerrors и * ngif. Чтобы быть более читаемым, в моем примере кода используются только ngxerrors.
Заранее благодарим вас за время, которое вы возьмете.