[英]An object literal cannot have multiple properties with the same name
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:
所以我的问题是,当我在 ts 文件中包含这两个函数时出现此错误:
An object literal cannot have multiple properties with the same name.一个 object 文字不能有多个同名的属性。
And the error shows over "validators:" part of "validators: matchValidator('newPassword', 'confirmPassword'),"错误显示在“validators:”的“validators:”部分:matchValidator('newPassword', 'confirmPassword'),”
What am I doing wrong?我究竟做错了什么?
Here is my code:这是我的代码:
.ts file: .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 file: 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);
}
};
}
Use an array for the validators property:为 validators 属性使用一个数组:
changePasswordForm = this.formBuilder.group(
{
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword,
},
<AbstractControlOptions>{
validators: [
notEqualValidator('oldPassword', 'newPassword'),
matchValidator('newPassword', 'confirmPassword')
]
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.