Set Object as value of control using patchValue

Question

I'm wondering if is it possible to set an object as the value of a control :

TS:

this.form.patchValue({
  myfield: this.object ? this.object : ''
});

HTML :

 <mat-form-field>
   <mat-select formControlName="myfield" required="true">
       <mat-option *ngFor="let obj of objects" [value]="obj">
                {{obj.name}}
       </mat-option>
   </mat-select>
 </mat-form-field>

this does not work. but if patch the control with obj.id (and update the value to obj.id) it does work. So my question is: is it normal that the fiels does not accept an object as the value? Or is it something wrong with my code? I didnt find any answer on the documentation. thanks.

EDIT : here is a stackblitz reproducing the issue (keep in mind that it's just for the sake of the example, in real life I get the data from Api's and resolvers. https://stackblitz.com/edit/angular-5ie6ar-8wy6ky

Sure it works: https://stackblitz.com/edit/angular-5ie6ar?file=app/select-overview-example.html. If you want help, post a complete minimal example, as I just did, but which reproduces the problem. — JB Nizet, Aug 06 '19 at 16:12
@JBNizet here is a stackblitz reproducing the problem https://stackblitz.com/edit/angular-5ie6ar-8wy6ky — RidRoid, Aug 07 '19 at 13:33
Your select box displays 2 objects from selectResolvedData, but you're trying to select a third one, from resolvedData. The select box can't select an object that is not part of its list of selectable objects. Two objects with identical properties are still different objects, that are not `===`. — JB Nizet, Aug 07 '19 at 13:56
@JBNizet I'm sorry but i dont get it. what you're saying is that I should use the same object to build the select and set the selected value? in my snippet `selectResolvedData` contains all the values of the select, the `resolvedData` on the other hand is used to retrieve the value that the user POSTed previously (using the same select), so the object we're talking about is part the selectable objects. am I wrong ? — RidRoid, Aug 07 '19 at 14:31
No. Just make this experiment in the console: `const a = { foo: 'bar' }; const b = { foo: 'bar' }; console.log("is a equal to b: " + (a === b));`. The two object have the same property, with the same value, but they are still different, separate objects. So they're not equal. So the object you try to select is not equl to any of the selectable objects. So it can't be selected. — JB Nizet, Aug 07 '19 at 14:35
@JBNizet wow i didn't see that one coming...and I understand now why it works when using `object.id`. Un grand merci de Toulouse ^^ . please answer the question so I can mark it as the solution. — RidRoid, Aug 07 '19 at 15:21
Duplicate: https://stackoverflow.com/questions/39724161/angular-2-set-default-value-to-select-option — AT82, Aug 07 '19 at 18:32
@AJT_82 thanks for the link, `compareWith` solved my issue indeed. +1 — RidRoid, Aug 08 '19 at 08:01

score 0 · Accepted Answer · answered Aug 07 '19 at 16:12

Your select box displays 2 objects from an array, but you're trying to select a third one, from somewhere else.

The select box can't select an object that is not part of its list of selectable objects.

Two objects with identical properties are still different objects, that are not equal (i.e. a === b is false even if a and b look like identical objects, with the same properties and values).

Set Object as value of control using patchValue

1 Answers1