javascript - error TS7052: Element implicitly has an 'any' type because type 'AbstractControl' has no index signature. Did you mean to call 'get'?

Question

error TS2531: Object is possibly 'null'.

46     <ng-container *ngFor="let userFormGroup of
usersForm.get('users')['controls']; let i=index">
                                          
 46:48 - error TS7052: Element implicitly has an 'any' type because 
 type 'AbstractControl' has no index signature. Did you mean to
 call 'get'?

  46     <ng-container *ngFor="let userFormGroup of
  usersForm.get('users')['controls']; let i=index">

---

TS File

public usersForm!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() :void {
    this.usersForm = this.fb.group({
      users: this.fb.array([
        this.fb.group({
          gHService: [''],
          quantity: [''],
          startTime: [''],
          endTime: [''],
          remarks: ['']         
        })
      ])
    })
  }

  removeFormControl(i: number) {
    let usersArray = this.usersForm.get('users') as FormArray;
    usersArray.removeAt(i);
  }

  addFormControl() {
    let usersArray = this.usersForm.get('users') as FormArray;
    let arraylen = usersArray.length;

    let newUsergroup: FormGroup = this.fb.group({
          gHService: [''],
          quantity: [''],
          startTime: [''],
          endTime: [''],
          remarks: [''] 
    })

    usersArray.insert(arraylen, newUsergroup);
  }
  onSubmit(){
    console.log(this.usersForm.value);
  }

Template File

<form [formGroup]="usersForm" (ngSubmit)="onSubmit()">
    <ng-container *ngFor="let userFormGroup of usersForm.get('users')['controls']; let i=index">
      <div [formGroup]="userFormGroup">
        <label>
          Service Name:
          <input type="text" formControlName="gHService">
        </label>
        <label>
          Quantity:
          <input type="text" formControlName="quantity">
        </label>
        <label>
          Start Time:
          <input type="text" formControlName="startTime">
        </label>
        <label>
          End Time:
          <input type="text" formControlName="endTime">
        </label>
        <label>
          Remarks:
          <input type="text" formControlName="remarks">
        </label>
        <label>
          <button (click)="removeFormControl(i)">remove formGroup</button>
        </label>
      </div>
    </ng-container>
    <button type="submit">Submit</button>
  </form>
  <button (click)="addFormControl()">add new user formGroup</button>

Answer 1

As the error states 'AbstractControl' has no index signature. You need a way to inform typescript that usersForm.get('users') returns a FormArray

In your TS File

get userFormGroups () {
  return this.usersForm.get('users') as FormArray
}

In your html

<form [formGroup]="usersForm" (ngSubmit)="onSubmit()">
  <div formArrayName='users'>
    <ng-container *ngFor="let userFormGroup of userFormGroups.controls; let i=index">
      <div [formGroupName]="i">

          <!--Other codes here -->

Note the lines

<div formArrayName='users'>

And

<div [formGroupName]="i">