Привет, я пытаюсь проверить как электронную почту, так и подтверждение, пароль и пароль, подтвердить пароль
Не могли бы вы дать несколько советов. Я использую реактивную форму. У меня есть директива mustMatch, но она не работает, когда я закомментирую один из 2 методов проверки, например, для подтверждения электронной почты, тогда метод проверки пароля работает, но я не могу заставить их работать одновременно
я попытался поместить два свойства validtor, но это не сработало, из-за чего я получил ошибки
html
<div class="form-group">
<input
type="text"
formControlName="confirm"
class="form-control"
[ngClass]="{
'is-invalid': submitted && (isEmailMismatch || f.confirm.errors)
}"
placeholder="confirm email"
/>
<div
*ngIf="submitted && (isEmailMismatch || f.confirm.errors)"
class="invalid-feedback"
>
<div *ngIf="f.confirm.errors.required">
Confirm Email is required
</div>
<div *ngIf="isEmailMismatch">Emails must match</div>
</div>
</div>
<div class="form-group">
<input
[(ngModel)]="password"
[type]="isTextFieldType ? 'text' : 'password'"
formControlName="password"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }"
placeholder="password"
/>
<img
class="eye-img pointer"
id="dropdown-eye"
src="../../../../assets/images/eye-gray.svg"
alt="see password"
(click)="togglePasswordFieldType()"
/>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">
Password must be at least 6 characters
</div>
</div>
</div>
<div class="form-group">
<input
[type]="isTextFieldType ? 'text' : 'password'"
formControlName="confirmPassword"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }"
placeholder="confirm password"
/>
<img
class="eye-img pointer"
id="dropdown-eye"
src="../../../../assets/images/eye-gray.svg"
alt="see password"
(click)="togglePasswordFieldType()"
/>
<div
*ngIf="submitted && f.confirmPassword.errors"
class="invalid-feedback"
>
<div *ngIf="f.confirmPassword.errors.required">
Confirm Password is required
</div>
<div *ngIf="f.confirmPassword.errors.mustMatch">
Passwords must match
</div>
</div>
</div>
ts
this.registerForm = this.formBuilder.group({
firstName: ['', Validators.required],
idNumber: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
confirm: ['', [Validators.required, Validators.email]],
contactNumber: ['', Validators.required],
password: ['', [Validators.required, Validators.minLength(6)]],
confirmPassword: ['', Validators.required]
},
{
validator: (form: FormGroup) => form.get('email').value !== form.get('confirm').value ? { emailMismatch: true } : null,
},
// code for password validation
// {
// validator: MustMatch('password', 'confirmPassword')
// }
);
}
// convenience getter for easy access to form fields
get f() { return this.registerForm.controls; }
get isEmailMismatch() { return this.registerForm.getError('emailMismatch')
;}
проверка и подтверждение электронной почты, и подтверждение пароля