Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

302
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!