When attempting to populate a mat-select with multiple options using an array of ids from Firestore, I encountered an issue. The approach involved looping through the array, creating a new form control for each id, and then adding it to the formArray using the reactive form push method. Despite successfully patching values into the form group, the material select component was not pre-populating as expected.
patchValueForm(portfolio: any) {
this.formGroup.patchValue(portfolio);
for (const id of portfolio.property_ids) {
const control = new FormControl(id);
if (!this.property_ids.getRawValue().includes(id)) {
this.property_ids.push(control);
}
}
console.log(this.formGroup.getRawValue()); }
The HTML snippet used for the mat-select part is:
<mat-form-field appearance="outline">
<mat-select [formArrayName]="'property_ids'" multiple>
<mat-option *ngFor="let property of properties; let i = index"
(onSelectionChange)="updatePropertyIdArray(property.property_id)" >
{{property?.address?.first_line_address}}
</mat-option>
</mat-select>
<mat-error>Please select at least one property</mat-error>
</mat-form-field>
Even after exploring various methods online, the material select component remained unpopulated. If anyone has encountered a similar challenge before, I would appreciate any insights or solutions.