在“{ [key: string]: AbstractControl; 类型上找不到带有“string”类型参数的索引签名 }

Question

I'm currently working on an Angular project and defining a custom validator for a reactive form, and I'm having this error within the custom validators function, which being built. Below are the code and the error received.

 initializeForm() {
    this.registerForm = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', [Validators.required,
      Validators.minLength(4),
      Validators.maxLength(8)]),
      confirmPassword: new FormControl('', Validators.required)
    });
  }

  matchValues(matchTo: string): ValidatorFn {
    return (control: AbstractControl) => {
      return control?.value === control?.parent?.controls[matchTo].value
        ? null : { isMatching: true }
    }
  }

The Error Message:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ [key: string]: AbstractControl; } | AbstractControl[]'.
  No index signature with a parameter of type 'string' was found on type '{ [key: string]: AbstractControl; } | AbstractControl[]'.

Can someone explain why this happens and how to handle it the correct way?

Regards,

Answer 1

Try casting control?.parent?.controls to { [key: string]: AbstractControl; } since it has two possible types. If it's type is AbstractControl[] , then the index is not of type string, but of type number.

Something like this

 matchValues(matchTo: string): ValidatorFn {
    return (control: AbstractControl) => {
      const controls = control?.parent?.controls as { [key: string]: AbstractControl; };
      let matchToControl = null;    
      if(controls) matchToControl = controls[matchTo];       
      return control?.value === matchToControl?.value
        ? null : { isMatching: true }
    }