角2访问2.级使用FormBuilder嵌套FormArrays

Question

使用角2 formbuilder我想插入数据到第二个数组？ “modelArray”;这里是我的TS的一部分和HTML文件

createModelArray(): void { 
 
    this.dataFRM = this.fb.group({ 
 
     docNo: [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(30)])], 
 
     companyId: [null, Validators.compose([Validators.required])], 
 
     purchaseTypeId: [null, Validators.compose([Validators.required])], 
 
     transactionsDate: [null, Validators.compose([Validators.required])], 
 
     wareHouseId: [null, Validators.compose([Validators.required])], 
 
     storeId: null, 
 
     note: null, 
 
     taxTotal: null, 
 
     discountTotal: null, 
 
     grandTotal: null, 
 
     transportationAmount: null, 
 
     orderNo: null, 
 
     orderedBy: null, 
 
     invoiceDispatchDate: null, 
 
     maturityDate: null, 
 
     deliveryAddress: null, 
 
     status: true, 
 
     userId: CONFIG.userInfo.userId, 
 
     lastModifiedBy: null, 
 
     modelDetail: this.fb.array([ 
 
     this.initModelDetail() 
 
     ]) 
 
    }); 
 
    } 
 

 
    initModelDetail(): any { 
 
    return this.fb.group({ 
 
     modelName: ['', [Validators.required, Validators.minLength(3)]], 
 
     price: ['', [Validators.required]], 
 
     exchange: [''], 
 
     sizeGroup: null, 
 
     modelArray: this.fb.array([ 
 
     this.initmodelArray() 
 
     ]) 
 
    }); 
 
    } 
 

 
    initmodelArray(): any { 
 
    return this.fb.group({ 
 
     colorId: ['', Validators.required], 
 
     sizeId: [], 
 
     price: [], 
 
     qty: [1, Validators.required] 
 
    }) 
 
    };

<div class="row"> 
 

 
     <form [formGroup]="dataFRM" class="form-horizontal" autocomplete="off" novalidate> 
 
       <div class="container"> 
 
        <div class="col-xs-12"> 
 
         <div class="margin-20"> 
 
          <h4>SatinAlma Detay</h4> 
 
         </div> 
 
         <div class="margin-20"> 
 
          <a class="btn btn-default" (click)="addModelInfo()" style="cursor: default"> {{"SYSTEM_CRUD.NEW"|translate}}</a> 
 
         </div> 
 
         <div formArrayName="modelDetail"> 
 
          <div class="panel panel-default" [formGroupName]="i" *ngFor="let project of dataFRM.controls.modelDetail.controls; let i = index"> 
 
           <div class="panel-heading"> 
 
            <span>Model {{i + 1}}</span> 
 
            <span class="glyphicon glyphicon-remove pull-right" (click)="removeModel(i)"></span> 
 
           </div> 
 
           <div class="panel-body"> 
 
            <div class="row"> 
 
             <div class="form-group col-xs-3"> 
 
              <label>Model Adı</label> 
 
              <input type="text" class="form-control" formControlName="modelName" placeholder="model adı.."> 
 
             </div> 
 
             <div class="form-group col-xs-3"> 
 
              <label>Fiyati</label> 
 
              <input type="number" class="form-control" formControlName="price" placeholder="fiyat.."> 
 
             </div> 
 
             <div class="form-group col-xs-3"> 
 
              <label>Doviz</label> 
 
              <ng-select formControlName="exchange" [options]="exchangeList" [multiple]="false" [allowClear]="true" placeholder="doviz seçiniz.."></ng-select> 
 
             </div> 
 
             <div class="form-group col-xs-3"> 
 
              <label>Beden Seti</label> 
 
              <ng-select formControlName="sizeGroup" [options]="sizeGroupList" [multiple]="false" [allowClear]="true" (selected)="getSizeList($event.value)" 
 
               placeholder="benden seti seçiniz.."> </ng-select> 
 
             </div> 
 
            </div> 
 

 
            <br/> 
 
            <div class="row"> 
 
             <div class="col-xs-12"> 
 
              <div formArrayName="modelArray"> 
 
               <div class="table table-bordered table-hover table-resonsive table-striped"> 
 
                <thead> 
 
                 <tr> 
 
                  <th>Rengı</th> 
 
                  <th>Fiyati</th> 
 
                  <th>İşlem</th> 
 
                  <th><button class="btn btn-primary" (click)="addColor(project.controls.modelArray.controls)"> Yeni</button></th> 
 
                 </tr> 
 
                </thead> 
 
                <tbody> 
 
                 <div [formGroupName]="x" *ngFor="let detail of project.controls.modelArray.controls; let x = index"> 
 
                  <tr> 
 
                   <td> 
 
                    <ng-select formControlName="colorId" [options]="colorsList" [multiple]="false" [allowClear]="true" placeholder="ürün seçiniz.."></ng-select> 
 
                   </td> 
 
                   <td> 
 
                    <input type="number" class="form-control" formControlName="price" placeholder="fiyati.."> 
 
                   </td> 
 
                   
 
                   <td class="text-right"> 
 
                    <div class="btn-group"> 
 
                     <a class="btn btn-danger btn-xs btn-rounded" (click)="removeColor(X)"><i class="fa fa-trash"></i> Sil</a> 
 
                    </div> 
 
                   </td> 
 
                  </tr> 
 
                 </div> 
 
                </tbody> 
 
               </div> 
 
              </div> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 

 
         <div class="margin-20"> 
 
          <a class="btn btn-default" (click)="addModelInfo()" style="cursor: default"> {{"SYSTEM_CRUD.NEW"|translate}}</a> 
 
         </div> 
 
         <div class="clearfix"></div> 
 
        </div> 
 
       </div> 
 
       </form> 
 
      </div>

enter link description here 寻找格兰上述解决方案;我只是试图访问数组内的数组。

在此先感谢。

Answer 1

随着group.get(...)这应该让你的数组：

this.dataFRM.get('modelDetail.0.modelArray')