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

【问题标题】：How can I dynamically create and patch the value of a select field on an Angular reactive form?如何在 Angular 响应式表单上动态创建和修补选择字段的值？
【发布时间】：2019-09-22 12:32:03
【问题描述】：

我创建了一个 Angular 响应式表单。我有一个从 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 调用返回的。

【问题讨论】：

buildPayCategories 是什么？
抱歉...忘记了。我已经编辑包含它。它所做的只是构建选择字段的选项。
FromControll 将（选定的）值作为构造函数 arg，而不是选项数组。除非payCategories 是单值而不是数组，否则它是错误的。

标签： angular typescript angular-reactive-forms form-control

【解决方案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 })
      });
    }
  }

【讨论】：