![](/img/trans.png)
[英]An object literal cannot have multiple properties with the same name in strict mode. The property “path” says to be duplicated
[英]An object literal cannot have multiple properties with the same name
我有两个验证器函数,第一个验证器用于当用户输入与旧密码相同的新密码时,它会显示错误。 第二个验证器是“新密码”和“确认密码”必须匹配。 所以我的问题是,当我在 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);
}
};
}
为 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.