Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

I'm facing an issue when trying to create a custom validator with Angular. Indeed for my sign-up page, I created a form and to check if password et confirmPassword matched, I wanted to created a custom validator.

But I faced the next issue (see picture), and even all similars requests I found out on Internet, it didn't fix my problem.

Issue is : enter image description here

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;
}

}

And custom-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 }
}

}

If you have any idea... I would apreciate.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

By extending FormGroup and calling super with { validator: CustomValidators.passwordMatchValidator } you don't comply with the actual constructor signature of FormGroup which is supposed to take a plain ValidatorFn as second parameter, not embedded in an object like you did.

Try like this:

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
    );
  }
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda