I have two validator functions, the first validator is for when a user enters new password same as the old one, it displays an error. The second validator is that "new password" and "confirm password" must match.
So my problem is that i get this error when i include both functions in my ts file:
An object literal cannot have multiple properties with the same name.
And the error shows over "validators:" part of "validators: matchValidator('newPassword', 'confirmPassword'),"
What am I doing wrong?
Here is my code:
.ts file:
import {
AbstractControl,
AbstractControlOptions,
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import { AppConfig } from 'src/app/_common/configs/app.config';
import { Component } from '@angular/core';
import { PasswordRegex } from 'src/app/_common/constants';
import { matchValidator } from 'src/app/_common/validators/match.validator';
import { notEqualValidator } from 'src/app/_common/validators/match.validator';
@Component({
selector: 'app-change-password',
templateUrl: './change-password.component.html',
styleUrls: ['./change-password.component.scss'],
})
export class ChangePasswordComponent {
appConfig = AppConfig;
oldPassword = new FormControl(null, [
(c: AbstractControl) => Validators.required(c),
Validators.pattern(PasswordRegex),
]);
newPassword = new FormControl(null, [
(c: AbstractControl) => Validators.required(c),
Validators.pattern(PasswordRegex),
]);
confirmPassword = new FormControl(null, [
(c: AbstractControl) => Validators.required(c),
Validators.pattern(PasswordRegex),
]);
changePasswordForm = this.formBuilder.group(
{
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword,
},
<AbstractControlOptions>{
validators: notEqualValidator('oldPassword', 'newPassword'),
validators: matchValidator('newPassword', 'confirmPassword'),
}
);
constructor(private formBuilder: FormBuilder) {}
onSubmit(): void {
if (!this.changePasswordForm?.valid) {
return;
}
}
}
match.validator.ts file:
import { FormGroup } from '@angular/forms';
export function matchValidator(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors['matchValidator']) {
return;
}
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ matchValidator: true });
} else {
matchingControl.setErrors(null);
}
};
}
export function notEqualValidator(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors['notEqualValidator']) {
return;
}
if (control.value == matchingControl.value) {
matchingControl.setErrors({ notEqualValidator: true });
} else {
matchingControl.setErrors(null);
}
};
}
CodePudding user response:
Use an array for the validators property:
changePasswordForm = this.formBuilder.group(
{
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword,
},
<AbstractControlOptions>{
validators: [
notEqualValidator('oldPassword', 'newPassword'),
matchValidator('newPassword', 'confirmPassword')
]
}
);