一個 object 文字不能有多個同名的屬性

Question

我有兩個驗證器函數，第一個驗證器用於當用戶輸入與舊密碼相同的新密碼時，它會顯示錯誤。 第二個驗證器是“新密碼”和“確認密碼”必須匹配。 所以我的問題是，當我在 ts 文件中包含這兩個函數時出現此錯誤：
一個 object 文字不能有多個同名的屬性。
錯誤顯示在“validators:”的“validators:”部分：matchValidator('newPassword', 'confirmPassword'),”

我究竟做錯了什么？

這是我的代碼：

.ts 文件：

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 文件：

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

為 validators 屬性使用一個數組：

changePasswordForm = this.formBuilder.group(
  {
    oldPassword: this.oldPassword,
    newPassword: this.newPassword,
    confirmPassword: this.confirmPassword,
  },
  <AbstractControlOptions>{
    validators: [
      notEqualValidator('oldPassword', 'newPassword'),
      matchValidator('newPassword', 'confirmPassword')
    ]
  }
);