Как поправить Type 'AbstractControl' is not assignable to type 'FormControl'.?

Question

[ABCquestion]

export class CompoundStringComponent extends FormGeneratorWidgetMixinComponent {
  public compoundStringControl: FormGroup;

  public cellCount?: number = 1;

  public ngOnInit() {
    this.initField();
  }

  private initField(): void {
    this.cellCount = Number(this.field.rawAttrs.props.cellCount) ?? 1;
    const compoundStringFilds: any = {};
    for (let i = 0; i <= this.cellCount; i += 1) {
      compoundStringFilds[`fild${i}`] = new FormControl(null);
    }
    this.compoundStringControl = new FormGroup(compoundStringFilds);
  }
}

<ng-template #widgetContent>
    <div *ngIf="field?.readonly; else editable" class="compound-string-wrapper grid">
      <ng-container FormGroup="compoundStringControl" *ngIf="compoundStringControl.controls.length">
          <gas-input 
          class="compound-string" 
          *ngFor="let input of compoundStringControl.controls;" 
          [formControl]="input"
          > 
        </gas-input>
      </ng-container>
    </div>
    <ng-template #editable>
      <ng-container 
      class="compound-string-wrapper grid"  
      FormGroup="compoundStringControl" 
      *ngIf="compoundStringControl.controls.length">
        <gas-input
          *ngFor="let input of compoundStringControl.controls;" 
          [formControl]="input"
          class="compound-string"
          nativeType="number"
          [required]="field!!.mandatory ?? false"
          [error]="errorMessage"      
        >
        </gas-input>
      </ng-container>
    </ng-template>
  </ng-template>

Answer 1

[historydev]

const fields: {[key: string]: AbstractControl} = {};
    for (let i = 0; i <= 10; i += 1) {
      const data = {}
      fields['fild' + i] = new FormControl(null);
    }
    console.log(fields)
    this.compoundStringControl = new FormGroup(fields);
    console.log(this.compoundStringControl)