Angular error TS2322: Type 'number' is not assignable to type 'FormGroup'

Question

I am binding stepper from JSON. How i can assign formgroup and stepControl values dynamically.But getting compile error Type 'undefined' is not assignable to type 'AbstractControlLike'. and error TS2322: Type 'number' is not assignable to type 'FormGroup'.

get formArray(): AbstractControl | null { return this.formGroup.get('formArray'); }

ngOnInit() {

this.bondTypesFeilds = bondTypes;
  
    for (let bondType of this.bondTypesFeilds.form_fields) {
      for (let k = 0; k < bondType.step[1].fields.length; k++) {

        this.formGroup = this._formBuilder.group({
          formArray: this._formBuilder.array([
            bondType.step[0].formGroup = new FormGroup({
              [bondType.step[1].fields[k].id ]: new FormControl('', [Validators.required])
            })
          ])
        });
      
  
    
    }
  }
  




  <mat-step *ngFor="let bonds of bondTypesFeilds.form_fields;let p =index" formGroupName="0" [stepControl]="formArray?.get([p])" >
            <form [formGroup]="p" *ngIf="renderLicenseForm()">
               
                <div class="row">
                    <div class="col-md-8 text-right card">
                        <ng-container *ngFor="let fields of bonds.step[1].fields">
                            <div class="full-width">
                                <div *ngIf="fields.type == 'dropdownlist'">
                                    <span class="labelpad">{{fields.question}}</span>
                                    <mat-form-field appearance="fill">
                                        <mat-select class="select-data" id={{fields.id}} formControlName={{fields.id}}
                                            placeholder={{fields.placeholder_text}} 
                                           >
                                            <mat-option *ngFor="let s of statelist" value={{s.id}}>
                                                {{s.text}} </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>   
                                        </div>
                                    </div>
                                </div>
                                <div *ngIf="fields.type == 'sidefields'">
                                    <span class="labelpad">{{fields.question}}</span>
                                    <ng-container *ngFor="let sidefields of fields.side_fields">
                                        <mat-form-field style="width: 26%;" appearance="fill"
                                            *ngIf="sidefields.type == 'textbox'">
                                            <input matInput placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
                                        </mat-form-field>
                                        &nbsp;
                                        <mat-form-field style="width: 26%;" appearance="fill"
                                            *ngIf="sidefields.type == 'dropdownlist'">
                                            <mat-select placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
                                                <mat-option *ngFor="let s of statelist" value={{s.id}}>
                                                    {{s.text}} </mat-option>
                                            </mat-select>
                                        </mat-form-field>
                                    </ng-container>
                                </div>
                            </div>
                            <div *ngIf="fields.type == 'section'">
                                <ng-container *ngFor="let sectionfields of fields.section_questions">
                                    <div class="full-width">
                                        <div *ngIf="sectionfields.type == 'dropdownlist'">
                                            <span class="labelpad">{{sectionfields.question}}</span>
                                            <mat-form-field appearance="fill">
                                                <mat-select class="select-data" 
                                                    formControlName={{fields.id}}
                                                    placeholder={{sectionfields.placeholder_text}}
                                                    >
                                                    <mat-option *ngFor="let s of statelist" value={{s.id}}>
                                                        {{s.text}} </mat-option>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>
                                        <div *ngIf="sectionfields.type == 'textarea'">
                                            <span class="labelpad">{{sectionfields.question}}</span>
                                            <mat-form-field appearance="fill">
                                                <textarea matInput cdkTextareaAutosize
                                                    #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
                                                    cdkAutosizeMaxRows="5" 
                                                    placeholder={{sectionfields.placeholder_text}}
                                                    formControlName={{fields.id}}></textarea>
                                            </mat-form-field>
                                        </div>
                                        <div *ngIf="sectionfields.type == 'textbox'">
                                            <span class="labelpad">{{sectionfields.question}}</span>
                                            <mat-form-field class="example-full-width" appearance="fill">
                                                <input matInput 
                                                    placeholder={{sectionfields.placeholder_text}}
                                                    formControlName={{fields.id}}>
                                            </mat-form-field>
                                        </div>
                                        <div *ngIf="sectionfields.type == 'checkbox'">
                                            <mat-checkbox formControlName={{fields.id}}>{{sectionfields.question}}
                                            </mat-checkbox>
                                        </div>
                                        <div class="row" style="margin-bottom: 10px;"
                                            *ngIf="sectionfields.type == 'radiobutton'">
                                            <div class="col-md-5">
                                                <span class="label">{{sectionfields.question}}</span>
                                            </div>
                                            <div class="col-md-7 text-left" style="padding-left: 22px;">
                                                <div>
                                                    <mat-radio-group class="radio-group"
                                                        (change)="radioChange($event)" formControlName={{fields.id}}>
                                                        <mat-radio-button class="matRadio" value="{{radiofields}}"
                                                            *ngFor="let radiofields of fields.options">
                                                            {{radiofields}}
                                                        </mat-radio-button>
                                                    </mat-radio-group>
                                                </div>
                                            </div>
                                        </div>
                                        <div *ngIf="sectionfields.type == 'sidefields'">
                                            <span class="labelpad">{{sectionfields.question}}</span>
                                            <ng-container *ngFor="let sidefields of sectionfields.side_fields">
                                                <mat-form-field style="width: 26%;" appearance="fill"
                                                    *ngIf="sidefields.type == 'textbox'">
                                                    <input matInput placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
                                                </mat-form-field>
                                                &nbsp;
                                                <mat-form-field style="width: 26%;" appearance="fill"
                                                    *ngIf="sidefields.type == 'dropdownlist'">
                                                    <mat-select placeholder={{sidefields.placeholder_text}} formControlName={{fields.id}}>
                                                        <mat-option *ngFor="let s of statelist" value={{s.id}}>
                                                            {{s.text}} </mat-option>
                                                    </mat-select>
                                                </mat-form-field>
                                            </ng-container>
                                        </div>
                                    </div>
                                </ng-container>
                            </div>
                            <div class="text-center" *ngIf="fields.type == 'sidebuttons'">
                                <ng-container *ngFor="let buttons of fields.side_buttons">
                                    <button class="back-button" *ngIf="buttons.placeholder_text == 'Back'"
                                        mat-button matStepperPrevious>{{buttons.placeholder_text}}</button>
                                    <button class="next-button" *ngIf="buttons.placeholder_text == 'Next'"
                                        mat-button matStepperNext (click)="onNextClick(bonds)">{{buttons.placeholder_text}}</button>
                                </ng-container>
                            </div>
                        </ng-container>
                    </div>
                </div>
            </form>
        </mat-step>

Answer 1

It seems like you meant to use a Formbuilder.group in the following place but used the FormGroup constructor instead, which uses a different Syntax

    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        bondType.step[0].formGroup = new FormGroup({ <------------- HERE
          [bondType.step[1].fields[k].id ]: new FormControl('', [Validators.required])
        })
      ])
    });