Подскажите пожалуйста, где я ошибся. Написал кастомный валидатор для проверки пароля, но работает он не так как я задумал. Ожидал, что при вводе в поле Confirm password пароль будет невалиден, если пароли не совпадают. Но выходит, что поле Сonfirm password валидно при вводе абсолютно любого символа.
app.component.ts
ngOnInit(): void {
this.form = new FormGroup({
//...
password: new FormControl('', [
Validators.required,
Validators.minLength(5),
Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=[^#$_\-+!]*[#$_\-+!]).{5,}$/),
]),
confirmPassword: new FormControl('', [
Validators.required,
]),
}, {validators: this.passwordMatchValidator});
}
passwordMatchValidator(form: FormGroup) {
return form.value.password === form.value.confirmPassword ? null : { mismatch: true};
}
app.component.html
div class="container">
<form class="auth-form"
[formGroup]="form" (ngSubmit)="submit()">
<h1>Registration new User</h1>
<div class="form-control">
<label>Password:
<input class="form-input" type="password" name="password"
formControlName="password"
pattern="^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z])(?=[^#$_\-+!]*[#$_\-+!]).{5,}$">
</label>
<div *ngIf="form.get('password').invalid && form.get('password').touched"
class="validation">
<small *ngIf="form.get('password').errors.required">
The password field is required. </small>
<small *ngIf="form.get('password').errors.minlength">
The password must be at least {{form.get('password').errors.minlength["requiredLength"]}} characters.
</small>
<br>
<small *ngIf="form.get('password').errors.pattern">
The password must include uppercase and lowercase letters, numbers, and one of symbols: '_' '!' '#' '+' '-' '$'
</small>
</div>
</div>
<div class="form-control">
<label>Confirm password:
<input class="form-input" type="password" name="confirmPassword" formControlName="confirmPassword"></label>
<div *ngIf="form.get('confirmPassword').invalid && form.get('confirmPassword').touched"
class="validation">
<small *ngIf="form.get('confirmPassword').errors.required">
The Confirm Password field is required.
</small>
<small *ngIf="form.errors || form.get('confirmPassword').errors.mismatch">
Password doesn't match.
</small>
</div>
</div>
<button class="btn" type="submit">Submit</button>
ссылка на stackblitz https://stackblitz.com/edit/angular-bvrnrf?embed=1&file=src/app/app.component.ts