Patch value on form array not setting value on material multiple select

Question

I am trying to patch value an array of ids from Firestore into a mat-select with multiple options. I am looping through the array and creating a new form control for each id and then using the reactive form push method to add to the formArray. Like so:

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()); }

This does seem to patch the value into the form as shown from the console log:

The problem that I am having is that its then not pre populating the material select shown here:

The HTML that I am using for this 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>

I have searched everywhere online and tried multiple different methods, but still ca not seem to populate the select. Has anyone experienced this before?

It can be similar to this question

Wandrille
– Wandrille

2019-11-01 12:12:46 +00:00
Commented Nov 1, 2019 at 12:12 — Wandrille
– Wandrille, Commented Nov 1, 2019 at 12:12

Havald · Accepted Answer · 2019-11-01 12:28:18Z

3

I would just use a simple formControl instead of the formArray in the mat select. The formControl holds the selection array and u can use formControlName.

 <mat-form-field appearance="outline">
      <mat-select [formControlName]="'property_ids'" multiple>
        <mat-option *ngFor="let property of properties; let i = index" [value]="property.property_id" 
                    (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>

You also need the value binding in the mat option to make the select work properly.

answered Nov 1, 2019 at 12:28

Havald

7398 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jm3s Over a year ago

Sorry I think im missing something, could you show how to have a formControl with an array value please?

Havald Over a year ago

@Jm3s The formControl can hold any value like objects and arrays. You can create such a formControl like new FormControl([]) or new FormGroup({properties: []})

Collectives™ on Stack Overflow

Patch value on form array not setting value on material multiple select

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related