'{ validator: any; 类型的参数}' 不可分配给 'ValidatorFn 类型的参数

Question

我在尝试使用 Angular 创建自定义验证器时遇到问题。事实上，对于我的注册页面，我创建了一个表单并检查密码和确认密码是否匹配，我想创建一个自定义验证器。

但我遇到了下一个问题（见图），甚至我在互联网上找到的所有类似请求都没有解决我的问题。

问题是：

import { FormControl, FormGroup, Validators } from '@angular/forms';
import { USER_ATTRIBUTS } from 'src/app/globalVariable';
import { CustomValidators } from 'src/app/validators/custom-validators'

export class UserFormSignUp extends FormGroup{
    constructor(){
        super({firstName: new FormControl('',[
            Validators.required]),
        lastName: new FormControl('',[
            Validators.required]),
        birthdate: new FormControl('',
            Validators.required),
        displayName: new FormControl('',[
            Validators.required,]),
        email: new FormControl('',[
            Validators.required,
            Validators.email]),
        password: new FormControl('',[
            Validators.required]),
        confirmationPassword: new FormControl('',[
            Validators.required])},
        {
            validator: CustomValidators.passwordMatchValidator
        });
}

get firstName() : FormControl{
    return this.get('firstName') as FormControl;
}

get lastName() : FormControl{
    return this.get('lastName') as FormControl;
}

get birthdate() : FormControl{
    return this.get('birthdate') as FormControl;
}

get displayName() : FormControl{
    return this.get('displayName') as FormControl;
}

get email() : FormControl{
    return this.get('email') as FormControl;
}

get password() : FormControl{
    return this.get('password') as FormControl;
}

get confirmationPassword() : FormControl{
    return this.get('confirmationPassword') as FormControl;
}

}

和自定义-validators.ts:

import { ValidationErrors, ValidatorFn, AbstractControl } from '@angular/forms';

checkPasswords: ValidatorFn = (group: AbstractControl):  ValidationErrors | null  => { 
    let pass = group.get('password')?.value;
    let confirmPass = group.get('confirmPassword')?.value
    return pass === confirmPass ? null : { notSame: true }
}

}

如果您有任何想法...我将不胜感激。

Answer 1

通过扩展 FormGroup and calling super with { validator: CustomValidators.passwordMatchValidator } you don't comply with the actual constructor signature of FormGroup，它应该采用普通的 ValidatorFn 作为第二个参数，而不是像您那样嵌入到对象中。

这样试试：

export class UserFormSignUp extends FormGroup {
  constructor() {
    super(
      {
        firstName: new FormControl("", [Validators.required]),
        lastName: new FormControl("", [Validators.required]),
        birthdate: new FormControl("", Validators.required),
        displayName: new FormControl("", [Validators.required]),
        email: new FormControl("", [Validators.required, Validators.email]),
        password: new FormControl("", [Validators.required]),
        confirmationPassword: new FormControl("", [Validators.required]),
      },
      CustomValidators.passwordMatchValidator
    );
  }
}

'{ validator: any; 类型的参数}' 不可分配给 'ValidatorFn 类型的参数

Argument of type '{ validator: any; }' is not assignable to parameter of type 'ValidatorFn

javascript

angular

typescript

forms

customvalidator