Jquery 如何使用动态对象长度创建动态FormControlName并绑定到FormGroup

需要使用对象长度创建动态FormControlNames到上述项。在该表单组中，对象的属性需要使用

items: FormArray;

this.personalForm = this.formBuilder.group({ potypectrl: [''],
      ponoctrl: [''], items: this.formBuilder.array([this.createItem()]) });

createItem(): FormGroup{
return this.formBuilder.group({
      linectrl: '',
      prodctrl: '',
      qtyctrl: '',
      uomctrl: '',
      upricectrl: 0.00,
      stotctrl: 0.00
    });
}

从以上产品的长度是需要设置为动态FormControlName（项目）

{{产品.材料说明}


单价




数量（{product.SalesUOM}}）






小计

以下方法用于计算各项小计和总账单

    <div formArrayName="items" *ngFor="let item of personalForm.get('items').controls; let i = index;"
                        fxFlex="100">
       <div [formGroupName]="i">
        <div fxLayout="row wrap">
          <div *ngFor="let product of products" fxFlex="100" fxFlex.gt-sm="20" fxFlex.sm="50" class="p-1">
            <mat-card id={{product.MaterialCode}} style="text-align: center !important;">
              <h3 class="text-center">{{product.MaterialDescription}}</h3>
              <br />
              <mat-label>Unit Price</mat-label>
              <input matInput placeholder="Unit Price" type="number" value={{product.UnitPrice}} 
               (change)="itemchange()" (keyup)="itemchange()"                                       formControlName="upricectrl" readonly />
               <br />
               <br />
               <img mat-card-image src="assets/img/products/CamelGreen.png" height="100" width="100px" alt="Photo 1">
               <mat-card-content style="text-align: center;">
               <mat-label>Quantity ({{product.SalesUOM}})</mat-label>
               <br />
<input matInput id="quantity_{{product.MaterialCode}}" type="number"  (change)="itemchange(product.MaterialCode)" (keyup)="itemchange(product.MaterialCode)" formControlName="qtyctrl" style="width: 100px;" min="0" placeholder="Enter quantity" />
                                            <br />
                                            <br />
                                            <mat-label>Subtotal</mat-label>
                                            <br />
                                   <input matInput type="text" id="subtotal_{{product.MaterialCode}}"
                                                style="width: 70px;" value={{sub_total}} readonly />
                                        </mat-card-content>
                                    </mat-card>
                                </div>
                            </div>
                        </div>
                    </div>

itemchange（）{
var count=this.personalForm.get（'items'）.value.length；
此值为0.current_tot=0；
对于（变量x=0；x

这种情况。但在我的例子中，我想我必须使用两个for循环

for-动态FormControlName

for-获取每个产品的信息

    <div formArrayName="items" *ngFor="let item of personalForm.get('items').controls; let i = index;"
                        fxFlex="100">
       <div [formGroupName]="i">
        <div fxLayout="row wrap">
          <div *ngFor="let product of products" fxFlex="100" fxFlex.gt-sm="20" fxFlex.sm="50" class="p-1">
            <mat-card id={{product.MaterialCode}} style="text-align: center !important;">
              <h3 class="text-center">{{product.MaterialDescription}}</h3>
              <br />
              <mat-label>Unit Price</mat-label>
              <input matInput placeholder="Unit Price" type="number" value={{product.UnitPrice}} 
               (change)="itemchange()" (keyup)="itemchange()"                                       formControlName="upricectrl" readonly />
               <br />
               <br />
               <img mat-card-image src="assets/img/products/CamelGreen.png" height="100" width="100px" alt="Photo 1">
               <mat-card-content style="text-align: center;">
               <mat-label>Quantity ({{product.SalesUOM}})</mat-label>
               <br />
<input matInput id="quantity_{{product.MaterialCode}}" type="number"  (change)="itemchange(product.MaterialCode)" (keyup)="itemchange(product.MaterialCode)" formControlName="qtyctrl" style="width: 100px;" min="0" placeholder="Enter quantity" />
                                            <br />
                                            <br />
                                            <mat-label>Subtotal</mat-label>
                                            <br />
                                   <input matInput type="text" id="subtotal_{{product.MaterialCode}}"
                                                style="width: 70px;" value={{sub_total}} readonly />
                                        </mat-card-content>
                                    </mat-card>
                                </div>
                            </div>
                        </div>
                    </div>

itemchange() {
var count = this.personalForm.get('items').value.length;
this.current_tot = 0;
for (var x = 0; x < count; x++) {
var stotval: any;
stotval = (this.personalForm.get('items').value[x].qtyctrl*this.personalForm.get('items').value[x].upricectrl);
if (stotval == "") { stotval = 0; }
this.current_tot += stotval;
}
}