An object literal cannot have multiple properties with the same name

Question

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);
    }
  };
}

Answer 1

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')
    ]
  }
);