如何在Angular反应表单上动态创建和修补选择字段的值？

Question

我创建了一个Angular反应形式。 我有一个select字段，我从API调用返回的值动态填充。

我也能够修改表单字段的值。

我试图动态创建一个选择字段并在同一步骤中修补该值。

我尝试过创建表单控件和patchValue的各种组合无济于事。

我要做的第一件事就是调用API端点并处理返回的数组对象

// The API returns an array of items
elTimecard.timecardDets.forEach((elTimecardDets, i) => {
    // Code dynamically creates the form control fields
    this.addWorkTracked(elTimecardDets);
});

如前面提到的代码所示，我遍历返回的数组以创建表单控件字段。

// Adds a row of form controls to the form array to track items worked.
// Parameter is optional so that the method can be used to create an empty row of form control fields
addWorkTracked(data?: ITimecardDet): void {
  // Push the new form control fields to the array
  this.timecardDets.push(this.buildWorkTracked(data));
}

然后我构建实际的表单控件

buildWorkTracked(data?: ITimecardDet): FormGroup {
    if (data) {
      // This code should dynamically create the new row of form control
      // fields and set the values based upon the data values passed 
      // through via the API call
      return new FormGroup({
        payCategory: new FormControl(this.buildPayCategories()),
        shiftDifferential: new FormControl(
          this.buildShiftDifferentialCategories()
        ),
        overtimeCategory: new FormControl(this.buildOvertimeCategories()),
        hoursWorked: new FormControl(data.hours),
        earnings: new FormControl({
          value: (this.baseRate * data.hours).toFixed(2),
          disabled: true
        })
      });
    } else {
      // Create a new row of 'clean' form control fields
      return new FormGroup({
        payCategory: new FormControl(this.buildPayCategories()),
        shiftDifferential: new FormControl(
          this.buildShiftDifferentialCategories()
        ),
        overtimeCategory: new FormControl(this.buildOvertimeCategories()),
        hoursWorked: new FormControl('0:00'),
        earnings: new FormControl({ value: null, disabled: true })
      });
    }
  }
// Code that builds the select options
buildPayCategories() {
    this.payCategories = this.timeEntry.payCategories;
    return this.payCategories;
}

如果需要，这是HTML

<select
    matNativeControl
    formControlName="payCategory"
    id="{{ payCategory + i }}">
    <option
        *ngFor="
        let payCategory of payCategories;
        let payCategoryIndex = index"
        [ngValue]="payCategoryIndex">
            {{ payCategory.description }}
    </option>
</select>

我希望我的if子句的第一部分接收数据以动态创建表单控件选择字段并根据数据值设置所选值。

例如，如果数据返回1并且我在选择下拉列表中有四个项目（值为0,1,2,3），我希望选择第二个项目，因为这是从API调用返回的内容。

Answer 1

我想出了一个解决方案。 随意提供一个更好的。 我改变了我的buildWorkTracked方法，如下所示......

buildWorkTracked(data?: ITimecardDet): FormGroup {
    // If data was provided, dynamically create the form controls stored in const
    // Provide values from data param for inputs
    if (data) {
      const buildTimecardDetsLineItem = new FormGroup({
        payCategory: new FormControl(this.buildPayCategories()),
        shiftDifferential: new FormControl(
          this.buildShiftDifferentialCategories()
        ),
        overtimeCategory: new FormControl(this.buildOvertimeCategories()),
        hoursWorked: new FormControl(data.hours),
        earnings: new FormControl({
          value: (data.baserate * data.hours).toFixed(2),
          disabled: true
        })
      });
      // Patch form array to set selected values based off of data param
      buildTimecardDetsLineItem.patchValue({
        payCategory: data.paycatinc,
        shiftDifferential: data.shiftDifferentialTypeId,
        overtimeCategory: data.overtimeTypeId
      });
      // Return const
      return buildTimecardDetsLineItem;
    } else {
      // If no data provided, create blank form array for end user entry
      return new FormGroup({
        payCategory: new FormControl(this.buildPayCategories()),
        shiftDifferential: new FormControl(
          this.buildShiftDifferentialCategories()
        ),
        overtimeCategory: new FormControl(this.buildOvertimeCategories()),
        hoursWorked: new FormControl('0:00'),
        earnings: new FormControl({ value: null, disabled: true })
      });
    }
  }