Unable to initialize existing values and selected values at the same time when used as child component

[allensutton]

I am attempting to use ngx-mat-select-search as a child component of a parent form. When the user goes to the form, existing values for the item being manipulated should be populated in the form, then any updates made in the form will be sent to a database to update that record. However, I am only able to get two scenarios to occur:

1.) Existing values populate, but without new values being "seen" by the parent when the form is submitted.
2.) Existing values are not populated, but new values are successfully sent upstream to the parent form from the child.

It seems to center around the formcontrol binding on mat-select. When I use [formControl]="something" then scenario 1 happens. When I use formControlName="something", I get the scenario in scenario 2. I have a stackblitz here . Do you know how to get both requirements to work?

[macjohnny]

The solution is to set the initial value on the correct form control of the parent form, i.e.

  setHomes(homes) {
    this.parentForm.get("assignedHomes").setValue(homes);
  }

See this working example: https://stackblitz.com/edit/github-mfmoas-om1yfr?file=src/app/child-component2/child-component2.component.ts

Since this issue is not related to ngx-mat-select-search but rather the correct usage of angular form controls, I am closing this issue.

By the way: in your code there is a lot of room for improvement, especially concerning how / which objects are passed, etc.

[allensutton]

Thank you for the info - it looks like it works both ways now. However, I don't think I was specific enough - the value upon submission should be an array of the _id values for the entries that are selected, as opposed to an array of their objects. When I change the [value] field from "home" to "home._id" it messes it all up, however. Any ideas on how to fix that? My apologies, I know this isn't a bug on your end, it's more of a lack of understanding on my end.

[macjohnny]

@allensutton can use the home._id value

<mat-option *ngFor="let home of filteredHomesMulti | async" [value]="home._id">

by adjusting the compareWith function to

this.multiSelect.compareWith = (a: string, b: string) => a === b;

and set the initial value accordingly:

  setHomes(homes) {
    this.parentForm.get("assignedHomes").setValue(homes.map(home => home._id));
  }

See this working example: https://stackblitz.com/edit/github-mfmoas-pqvwdv?file=src%2Fapp%2Fchild-component2%2Fchild-component2.component.ts

[allensutton]

Awesome, that works. I thought it was probably something like that - the map function was what I was missing. Thank you so much!

[macjohnny]

@allensutton if you like the project, feel free to add a star here on github