一个对象字面量不能有多个同名的属性

Question

我有两个验证器函数，第一个验证器用于当用户输入与旧密码相同的新密码时，它会显示错误。第二个验证器是“新密码”和“确认密码”必须匹配。所以我的问题是，当我在 ts 文件中包含这两个函数时出现此错误：
一个对象文字不能有多个同名的属性。
错误显示在“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

为验证器使用数组属性:

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

一个对象字面量不能有多个同名的属性

An object literal cannot have multiple properties with the same name

validation

typescript

angular