无法以反应形式显示来自 formArray 内的嵌套 formGroup 的值。出现以下错误：找不到带有路径的控件

Question

我无法从由动态添加的 formGroups 组成的 formArray 中获取值。我可以保存这些值，但是当我尝试预先填充表单以创建编辑表单页面时，我看不到来自 FormArray 的任何数据。

   <mat-grid-tile [colspan]="3" [rowspan]="6">
  <div formArrayName="itemGroupMappings" class="ScrollStyle">

    <button mat-raised-button color="primary"  type="button" (click)="onAddButtonClick()" >Add group and OEM nos.</button>
    
   
   
<div *ngFor="let itemGroupMappingControl of getItemGroupDetailControls(); let i = index" [formGroupName] = "i"  >

   
    <mat-form-field>
            
       <div formGroupName="itemGroup">
             
            <mat-label>Group Name</mat-label>
            <input matInput type ="text" placeholder="" name="groupName" autocomplete="off" 
                    formControlName="groupName" class="form-control" >
       
     </div>
    
    </mat-form-field>
     <mat-form-field>
      <div>
            <mat-label >Oem Nos.</mat-label>
            <input  matInput type ="text" placeholder="" name="oemNo" autocomplete="off" 
                                        formControlName="oemNo" class="form-control" >
     </div>
     </mat-form-field>
   

     <button mat-raised-button color="warn"  type="button" (click)="onDeleteClick(i)" >Delete Group</button>

    </div>
     
     
 </div>

  
</mat-grid-tile> 

this.editDeleteForm = this.formBuilder.group({

      'itemCode' : new FormControl(),
      'itemName' : new FormControl(),
      'itemGroupMappings' : this.formBuilder.array([this.addItemGroup()])
   
     
   

  });
}

  addItemGroup() : FormGroup
  {
    return this.formBuilder.group(
      {
        'itemGroup' : new FormGroup({
          'groupName' : new FormControl('')
        }),
        'oemNo' : new FormControl('')
      }
    )
  
  }


 





  editItem(item : Item)
  {
    this.editDeleteForm.patchValue({

      itemCode : item.itemCode,
      itemName  : item.itemName,

    });

       this.editDeleteForm.setControl('itemGroupMappings',this.setExistingGroupMappings(this.itemById.itemGroupMappings));
   
    }

    

   
  


  setExistingGroupMappings(mappings : ItemGroupDetail[]) : FormArray
  {
    const formArray = new FormArray([]);

    mappings.forEach( s => {
     formArray.push( this.formBuilder.group({
        itemGroup :  ({
          groupName : s.itemGroup.groupName

        }),
        oemNo : s.oemNo

             }

           )
        );
    });

    return formArray;

  }

 

  getItemGroupDetailControls()
  {  
    console.log(((<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls));
    return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls;

  
  } 

我的 model.ts 文件是这样的

import { ItemType } from "./item-type.model";


export interface Item{
    itemCode : String,
    itemName : String,
    oemNos : String,
 
    
    itemGroupMappings : ItemGroupDetail[],
    

} 

export interface ItemGroupDetail{
   
    itemGroup :  ItemGroup,
    oemNo :  String
}

export interface ItemGroup{
  
  groupName : String
}

值完美地保存在 itemGroupMappings 中，请参阅我从控制台复制的下面的 json：

itemGroupMappings: Array(2)
0:
itemGroup: {groupId: "G01", groupName: "JCB"}
itemGroupDetailId: {itemCode: "DUMMY09", groupName: "JCB"}
oemNo: "87089900"
__proto__: Object
1:
itemGroup: {groupId: "G03", groupName: "MASSEY"}
itemGroupDetailId: {itemCode: "DUMMY09", groupName: "MASSEY"}
oemNo: "90199191"
__proto__: Object
length: 2
__proto__: Array(0)
itemName: "DUMMY09"

但是我收到以下错误：

core.js:5980 ERROR 错误：找不到带有路径的控件：'itemGroupMappings -> 0 -> itemGroup -> groupName'

edit-delete-item.component.ts:175 (2) [FormGroup, FormGroup]
core.js:5980 ERROR Error: Cannot find control with path: 'itemGroupMappings -> 1 -> itemGroup -> groupName'
    at _throwError (forms.js:2574)
    at setUpControl (forms.js:2392)
    at FormGroupDirective.addControl (forms.js:5626)
    at FormControlName._setUpControl (forms.js:6177)
    at FormControlName.ngOnChanges (forms.js:6122)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1471)
    at callHook (core.js:2490)

我无法理解如何在编辑页面中正确地从 itemGroupMappings FormArray 中获取数据。 请帮忙，因为我是 Angular 的新手，并且已经坚持了很长时间。参考了各种帖子，但无法更正。 当我通过注释掉这样做时，我能够在 html 页面上正确显示“oemNo”

 <div formGroupName="itemGroup">
             
            <mat-label>Group Name</mat-label>
            <input matInput type ="text" placeholder="" name="groupName" autocomplete="off" 
                    formControlName="groupName" class="form-control" >
       
     </div>

但是，在访问 groupName 时，我遇到了上述错误。请告知。 提前感谢您的帮助。

Answer 1

尝试.value 而不是.controls。即使看起来你所做的应该有效，但它不会。因为 FormArray 将值存储在 .value 中。像这样的：

getItemGroupDetailControls()
  {
// Don't do this  
   
console.log(((<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls));
    return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).controls;
  
  
// Do this instead

console.log(((<FormArray>this.editDeleteForm.get('itemGroupMappings')).value));
    return (<FormArray>this.editDeleteForm.get('itemGroupMappings')).value;

  } 

因为归根结底，itemGroupMappings 还是先是 formControl，后是 formArray。