I am facing an issue with two validator functions in my TypeScript file. The first validator checks if a user enters a new password same as the old one, displaying an error if so. The second validator ensures that "new password" and "confirm password" must match.
The problem arises when I include both functions in my ts file, resulting in the following error message:
An object literal cannot have multiple properties with the same name.
The error specifically points to the "validators:" part of "validators: matchValidator('newPassword', 'confirmPassword'),"
What could be causing this error?
Below is the code snippet:
.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);
}
};
}