Angular Reactive Forms Select not showing initial value

Question

I'm trying to load some selects with predefined values in angular reactive form, But initial value is not showing up.

These values are objects. Don't know if this has any effect on the issue.

Below is the sample Stackblitz on this:

https://stackblitz.com/edit/angular-ivy-xrapce?file=src%2Fapp%2Fselect-form%2Fselect-form.component.ts

Thanks for any advise.

Answer 1

You should use compare function like this:

<select [compareWith]="compareFn" 

and then:

compareFn = this._compareFn.bind(this);

_compareFn(a, b) {
  return a.id === b.id;
}