Как я могу динамически создать и исправить значение поля выбора в угловой реактивной форме?

Question

Я создал угловую реактивную форму.У меня есть поле выбора, которое я заполняю динамически из значений, возвращаемых из вызова 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 })
      });
    }
  }