Angular中自定义验证器的问题

Question

我知道这个问题已经在许多其他帖子中被问过了，但在所有提出的解决方案中，我都找不到一个能为我解决问题的解决方案。

我正在尝试创建一个验证器，以检查输入的确认密码是否与密码相同。

这是我的构建表单代码：

this.form = new FormGroup({
name: new FormControl('', [Validators.required]),
surname : new FormControl('', [Validators.required]),
username: new FormControl('', [Validators.required, Validators.email]),
tempUsername: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(16)]),
passwordTemp: new FormControl('', [Validators.required]),
}, { validator: this.matchingPasswords }
);
}

这是我的验证器方法：

public matchingPasswords(c: AbstractControl): ValidationErrors | null {
const password = c.get(['passwords']);
const confirmPassword = c.get(['passwordTemp']);
if (password.value !== confirmPassword.value) {
return { mismatchedPasswords: true };
}
return null;
}

在构建表单的第8行中，我得到了以下错误：

TS2345:类型为"｛validator:(c:AbstractControl(=>ValidationErrors；｝"的参数不可分配给类型为"ValidatorFn|ValidatorFn[]| AbstractControlOptions"的参数。对象文字只能指定已知属性，并且类型"ValidatorFn | ValidatorFn[]| AbstractControlOptions"中不存在"validator"。

有什么想法吗？

Answer 1

您应该使用validators而不是validator:

this.form = new FormGroup({
// fields
}, { validators: this.matchingPasswords });

也许将matchingPasswords移到导出的实用程序函数也更好，但这只是个人代码偏好。

其他工作符号有：

this.form = new FormGroup({
// fields
}, this.matchingPasswords);

this.form = new FormGroup({
// fields
}, [this.matchingPasswords]);

Answer 2

使用验证器而不是验证器

{ validators: this.matchingPasswords }

和这个

public matchingPasswords: ValidatorFn = (c: AbstractControl): ValidationErrors | null => {
const password = c.get('passwords');
const confirmPassword = c.get('passwordTemp');
if (password && confirmPassword && password.value !== confirmPassword.value) {
return { mismatchedPasswords: true };
}
return null;
};