как получить значение из formcontrolname в угловых при сохранении формы?

Question

component.ts :( В этой группе форм у меня есть recipeArray как FormArray, я хочу получить значение, используя formControlName из HTML-кода. Но я получил неопределенное значение в console.log (mat); пожалуйста, дайте решение для этого. Заранее спасибо ..

addMaterial(index) {
      this.dialog.open(SelectMaterialComponent, {data :{matList:this.materialList,type: "Ingredients"}, minWidth: '60vw', minHeight: '40vh'})
       .afterClosed().subscribe( response => {
         if(!!response) {
           console.log(response);
          this.materialList[index] = [...this.materialList[index], ...response]

            const mat = this.formulationForm.patchValue({recipeArray: [
              ...this.formulationForm.get("recipeArray").value,{
                material:response[0].title
              } ] });
            console.log(mat);(this console log gets undefined value)
            console.log(this.materialList[index]);

          this.updateMaterials();  
      }
    })
  }

createItem() : FormGroup {
     return this.formBuilder.group({
        material : new FormControl(null, Validators.required),
        otherformulations : new FormControl(null, Validators.required)
     });
  }
 this.recipeArray = this.formulationForm.get('recipeArray') as FormArray;
    this.addItem();
}
``````````````````````
html code:



 <div formArrayName="recipeArray" *ngFor="let item of recipeArray.controls; let i = index;">
                <div [formGroupName]="i" class="add-div" >

            <mat-accordion>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                                Sub Recipe{{i+1}}
                        </mat-panel-title>                   
                    </mat-expansion-panel-header>

                            <div class="add-div">
                                Material
                    <mat-list role="list" formControlName="material" ngDefaultControl>
                        <mat-list-item role="listitem" *ngFor="let data of getMaterialListArray(i)">
                            <div class="file-name">
                                <span >{{data.title}}</span> 
                                <div>{{data.wt_in_kgs_per_unit}}{{data.uom}}</div>
                                <div class="btn-custom" (click)="deleteMaterial(data, i)">Delete</div>
                            </div>
                        </mat-list-item>                   
                    </mat-list>
                </div>
               <div class="btn-custom" (click)="addMaterial(i)">select+</div>