Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?ngtsc(7052)

Question

I'm getting a problem with 'controls'enter image description here enter image description here "Object is possibly 'null'.ngtsc(2531)" and "Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?ngtsc(7052)"

you can get an idea from this site https://csharp-video-tutorials.blogspot.com/2018/10/angular-dynamic-forms-tutorial.html what I want to do! I want to use formArray to check the validation. You can see below the picture whole hour input are displayed validation error. Because I didn't use formArray. when I implemented formArray It will get an error on this spot.

in the beginning I used this => *ngFor="let skill of employeeForm.get('skills').controls; let i = index" but the controls word is shown as an error!!!

.HTML


  

    
      
        
      
    


  
    
      Project
      Process
      Working Hours
      
    
  
  

    
      
        
          
          
        
      
      
        
        
        
      
      
      

        
          
          h
        

      
        
      
        m

.TS

export class DailyReportRegularTableComponent extends DailyReportLog implements OnInit {
  @Input() dataSource: UIDailyLogRegularTableInterface[] = []; 
  @Output() dataSourceChange = new EventEmitter();
  helper!: HelperService
  _formHelper: FormService = new FormService;
  employeeForm!: FormGroup;
  formErrors: any;
  validationMessages: any;


  constructor(private _helper: HelperService,private formBuilder: FormBuilder,private fb: FormBuilder) {
    super();
    this.helper = this._helper;
  }

  ngOnInit(): void {
    this.employeeForm = this.fb.group({
      skills: this.fb.array([
        this.addSkillFormGroup()
      ])
    });

    this.employeeForm.valueChanges.subscribe((data) => {
      this.logValidationErrors(this.employeeForm)
    });
  }

  addSkillButtonClick(): void {
    (this.employeeForm.get('skills')).push(this.addSkillFormGroup());
  }

  logValidationErrors(group: FormGroup = this.employeeForm): void{

    Object.keys(group.controls).forEach((key: string) =>{
      const abstractControl = group.get(key)

      if(abstractControl instanceof FormGroup){
        this.logValidationErrors(abstractControl)
      } else {
        this.formErrors[key] = '';
        if(abstractControl && !abstractControl.valid){
          for (const errorKey in abstractControl.errors) {
            if (errorKey) {
              this.formErrors[key];
            }
          }
        }
        if (abstractControl instanceof FormGroup) {
          this.logValidationErrors(abstractControl);
        }

        if (abstractControl instanceof FormArray) {
          for (const control of abstractControl.controls){
            if (control instanceof FormGroup) {
              this.logValidationErrors(control)
            }
          }
        }
      }
    })
  }

  addSkillFormGroup(): FormGroup{
    return this.fb.group({
      project: ['', Validators.required],
      process: ['', Validators.required],
      hours: ['', Validators.required],
      minutes: [''],
    })
  }

  OnLoadDataClick(): void{
    this.logValidationErrors(this.employeeForm)
  }
}

user_6294072 · Answer

This is strict type checking and considers employeeForm.get('skills') as any, which is true as you have not given it a type. I would suggest making a getter of this in which your specify the type:

get skillArr() {
  return this.employeeForm.get('skills') as FormArray
}

And use this in template:

let skill of skillArr.controls

Now Angular can tell it's a formArray. You COULD type it as any as well in the template, but as you can type it as a FormArray, I would recommend that. This would be the way to type it as any:

let skill of $any(employeeForm.get('skills')).controls

I only resort to this when I have a nested FormArray inside a FormArray, as using a getter there does not work.

Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?ngtsc(7052)

1 Answers