0

我正在尝试在 html 中呈现一个表格，该表格是反应式表单数组的表示。

我遍历复杂对象（FormGroup > FormArray > FormGroup > FormArray），最终数组是我们想要以转换后的格式向 UI 表示的数据。（发生在函数 groupFormGroup() 中）

一切正常，数据正确转换和显示。

但是，现在我正在尝试将输入（不是 formControlName 输入）添加到表中，并且当它们加载时，它们会在我无法单击或更改其值的情况下加载。它们没有被禁用，只是无法点击。控制台中没有出现错误。

我试过的：

  1. 修改类名，使其不再是 class='form-control'
  2. 将输入的 z-index 提高到最前沿
  3. 使输入位置相对

这是代码：

<div class="row" [formGroup]="address">
            <div class="col-12">
              <table class="w-100">
                <thead>
                  <th></th>
                  <th>Order ID</th>
                  <th>GP Code</th>
                  <th>Product</th>
                  <th>Quantity</th>
                  <th>Preset Suite Number</th>
                  <th></th>
                </thead>
                <tbody>
                  <ng-template formArrayName="addressOrders" ngFor let-addressOrder [ngForOf]="address.get('addressOrders').controls" let-ao="index">
                    <ng-container [formGroup]="addressOrder">
                      <ng-template ngFor let-fulfillment [ngForOf]="groupFormGroup(addressOrder.get('fulfillments').getRawValue(),'orderDetailId')" let-f="index">
                        <tr>
                          <td class='table-input'>
                            <input type="checkbox" 
                            (change)="updateFulfillmentFormControl(fulfillment,addressOrder,'selected',$event)"/>
                          </td>
                          <td>{{addressOrder.get('orderId').value}}</td>
                          <td>{{fulfillment['gpItemNumber']}}</td>
                          <td>{{fulfillment['name']}}</td>
                          <td>{{fulfillment['quantity']}}</td>
                          <td>
                            <ng-container *ngIf="fulfillment['isSuite']">
                              <!-- <input class="form-control" (keydown)="updateFulfillmentFormControl(fulfillment,addressOrder,'suiteNumber',$event)" /> -->
                              <input type="text" class="form-control" />
                            </ng-container>
                          </td>
                          <td>Edit Detail</td>
                        </tr>
                      </ng-template>
                    </ng-container>
                  </ng-template>
                </tbody>
              </table>
            </div>
          </div>

以及生成表单组的代码：

draw() {
    this.formGroup = this.initFormGroup(this.ordersToDisplay)
}

initFormGroup(ordersToDisplay: Array<BulkFulfillCustomer>):FormGroup {
    var queueList = this.queues.map(q => q['queue_id']);
    return this.fb.group({
      customers: this.fb.array(
        ordersToDisplay.map(otd => {
          return this.fb.group({
            gpCustomerNumber:[otd.gpCustomerNumber],
            customerName:[otd.customerName],
            customerAddresses: this.initAddressForm(otd.addressOrders, queueList)
          })
        })
      ) 
    })
  }

  initAddressForm(addressOrders: Array<BulkFulfillAddress>, queues:Array<string>):FormArray {
    return this.fb.array(
      addressOrders.map(ao => {
        return this.fb.group({
          addressLine:[ao.addressLine],
          bundleShipment:[true],
          addressOrders: this.initAddressOrdersForm(ao.orders,queues)
        })
      })
    )
  }

  initAddressOrdersForm(orders: Array<BulkFulfillOrder>, queues:Array<string>):FormArray {
    return this.fb.array(
      orders.map(o => {
        return this.fb.group({
          orderId: [o.order.id],
          fulfillments: this.initFulfillmentsForm(o.orderDetailFulfillments,queues)
        })
      })
    )
  }
  
  initFulfillmentsForm(fulfillments: Array<FulfillmentLine>, queues:Array<string>) {
    return this.fb.array(
      fulfillments.map(f => {
        return this.fb.group({
          selected:[true],
          expandDetail:[false],
          isSuite:[f.inventory.isSuite],
          suitePrefix:[f.inventory.suitePrefix],
          gpItemNumber:[f.inventory.gpItemNumber],
          name:[f.inventory.name],
          queueId:[{value:f.inventory.pulseQueueId,disabled:(!this.isPulseFulfill && f.inventory.fulfillmentMethod != INVENTORY_FULFILLMENT_PULSE)}, Validators.compose([Validators.required, ContainsListValidator(queues,'Queue ID')])],
          orderDetailId:[f.orderDetailFulfillment.orderDetailId],
          pulseOrderId:[f.orderDetailFulfillment.pulseOrderId],
          suiteNumber:[{value:f.orderDetailFulfillment.suiteNumber,disabled:!this.isPulseFulfill || !f.inventory.isSuite}, Validators.required],
          quantity:[{value:f.orderDetailFulfillment.quantity,disabled:f.orderDetailFulfillment.fulfillmentMethod != 1},Validators.compose([Validators.required, Validators.min(1),Validators.max(f.orderDetailFulfillment.quantity)])]
        })
      })
    )
  }
4

0 回答 0