Creating angular custom validators, but it keep throwing an error of abstractControl

Question

I am trying to create an custom validators. That is using two field to validate a international phone number. But I would just want to set the error only on the phone number section only.

I want to set a custom validators when the countryPhoneCode and phoneNumber doesnt match as a international number. But would only set error on the phoneNumber Field onlly.

I have tried multiple way and has not successfuly find any way. PLease help. Thank yuo so much

this is my form

this.registrationForm = new FormGroup({
      firstName: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required]),
      emailAddress: new FormControl('', [Validators.required, Validators.email]),
      countryCode: new FormControl(defaultCountry?.value, [Validators.required]),
      countryPhoneCode: new FormControl(defaultCountryCode?.value, [Validators.required]),
      phoneNumber: new FormControl('', [Validators.required]),
      postalCode: new FormControl(''),
    }, {validators: [phoneValidator]});

this is my custom validators

export const phoneValidator = (form: FormGroup): ValidationErrors | null => {
    const country = form!.controls['countryCode'];
    const num = form!.controls['phoneNumber'];
    if (num?.value && country?.value && !(new PhoneNumber(num.value, country.value).isValid())) {
        form.controls['phoneNumber'].setErrors({countryCodeFormat: true});
        
        return null;
    } else {
        return null;
    }
};

It keep throwing me an error that say this

 Argument of type '{ validators: ((form: FormGroup) => ValidationErrors | null)[]; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions | null | undefined'.
  Types of property 'validators' are incompatible.
    Type '((form: FormGroup) => ValidationErrors | null)[]' is not assignable to type 'ValidatorFn | ValidatorFn[] | null | undefined'.
      Type '((form: FormGroup) => ValidationErrors | null)[]' is not assignable to type 'ValidatorFn[]'.
        Type '(form: FormGroup) => ValidationErrors | null' is not assignable to type 'ValidatorFn'.
          Types of parameters 'form' and 'control' are incompatible.
            Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

78     }, {validators: [phoneValidator]});Argument of type '{ validators: ((form: FormGroup) => ValidationErrors | null)[]; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions | null | undefined'.
  Types of property 'validators' are incompatible.
    Type '((form: FormGroup) => ValidationErrors | null)[]' is not assignable to type 'ValidatorFn | ValidatorFn[] | null | undefined'.
      Type '((form: FormGroup) => ValidationErrors | null)[]' is not assignable to type 'ValidatorFn[]'.
        Type '(form: FormGroup) => ValidationErrors | null' is not assignable to type 'ValidatorFn'.
          Types of parameters 'form' and 'control' are incompatible.
            Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

78     }, {validators: [phoneValidator]});

I have try adding it but it doesnt seem like it working, please help

Answer 1

use

export const phoneValidator = (control: AbstractControl): ValidationErrors | null => {
    const form=(control as FormGroup)
    ..rest of your code..
   }

NOTE: The problem is the strict mode oblige you to declare a validator always as (AbstractControl)=>ValidationErrors|any