I have successfully developed an Angular reactive form that includes a select field populated dynamically with values retrieved from an API call.
In addition, I have managed to patch the form fields with the necessary data.
My current challenge is to dynamically generate a select field and patch its value simultaneously.
Despite my efforts in experimenting with various approaches for creating form controls and implementing patchValue, I have yet to achieve the desired outcome.
The initial step involves making an API call and processing the returned array object
// The API response consists of an array of items
elTimecard.timecardDets.forEach((elTimecardDets, i) => {
// The code dynamically generates the form control fields
this.addWorkTracked(elTimecardDets);
});
As illustrated in the above code snippet, I iterate through the array to create the form control fields.
// Appends a row of form controls to the form array for tracking worked items.
// The parameter is optional to allow creating an empty row of form control fields
addWorkTracked(data?: ITimecardDet): void {
// Append the new form control fields to the array
this.timecardDets.push(this.buildWorkTracked(data));
}
Next, I define the actual form controls
buildWorkTracked(data?: ITimecardDet): FormGroup {
if (data) {
// This piece of code aims to dynamically create the new row of form control
// fields and assign values based on the provided data from 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 fresh 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 responsible for generating select options
buildPayCategories() {
this.payCategories = this.timeEntry.payCategories;
return this.payCategories;
}
If required, below is the corresponding HTML structure
<select
matNativeControl
formControlName="payCategory"
id="{{ payCategory + i }}">
<option
*ngFor="
let payCategory of payCategories;
let payCategoryIndex = index"
[ngValue]="payCategoryIndex">
{{ payCategory.description }}
</option>
</select>
I aim for the first part of the conditional statement that receives the data to dynamically produce the select field form controls and designate the selected value according to the data received.
For instance, if the data indicates '1', with four items available (with values of 0, 1, 2, 3) in the select dropdown menu, I desire the second item to be pre-selected as it corresponds to the value returned by the API call.