Type AbstractControl is not assignable to type FormGroup

Question

I have a FormGroup with FormArray control filled with FormGroup instances

  someForm = this.fb.group({
    days: this.fb.array([
      this.fb.group({
        description: ['']
      })
    ])
  })

also, I have a getter for this array

  get days(): FormArray {
    return this.someForm.get('days') as FormArray;
  }

when I'm trying to iterate through FormArray and assign it to [formGroup] directive, like shown in this article

 <div *ngFor="let day of days.controls">
  <ng-container [formGroup]="day">
    ...

I'm getting

error TS2740: Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

Answer 1

Another workaround would be to use casting in the component.

template:

<ng-container [formGroup]="getFormGroup(day)">

component:

getFormGroup(control: AbstractControl) { return control as FormGroup; }
 

So that we can still utilize the control as input value to components looped in the ngFor for formArray

<ng-container *ngFor="let day of days.controls">
    <childComponent [formGroup]="day"></childComponent>
</ng-container>