md-select not binding with object.value

Question

I'm trying to binding a Material Design Select on angular 4 with a number property of a object. Like this:

<md-select placeholder="info" 
           formControlName="info"  
           [(ngModel)]="loggedUser.info" 
           (ngModelChange)="infoSelected()">
                 <md-option *ngFor="let info of infos"
                                    value="{{info.id}}">
                                    <span>{{info.name}}</span>
                 </md-option>
</md-select>

EDIT: Info object has two atributes:

id:number
name:string

loggedUser has an attribute called info of number type

The problem is that the select is not binding with the initial value

What I'm doing wrong?

Do you get the same if you try `[value]="info.id"`? – Michael Doye May 12 '17 at 14:16 — Michael Doye, May 12 '17 at 14:16
Yes, it still on the placeholder – Hanzo May 12 '17 at 14:28 — Hanzo, May 12 '17 at 14:28
please post details of `loggedUser.info` and `infos`. – Pengyy May 12 '17 at 15:09 — Pengyy, May 12 '17 at 15:09
I've updated the original message with more details. Thanks – Hanzo May 12 '17 at 15:25 — Hanzo, May 12 '17 at 15:25

score 0 · Answer 1 · answered May 13 '17 at 07:56

Using two-way-binding and model-driven form is not the intended way, since form control could be considered to replace the ngModel. But it can be done, but using ngModel is then pretty much unnecessary, because despite that, you need in your formcontrol make a reference to your loggedUser. As you can see from the plunker at the bottom, the object created by the form, has the exact value and build as the loggedUser, so the form object would then equal the object from the form. Depending on how you build the form, the object of the form could then simply be assigned to loggedUser upon submit. Also as a comment, the banana in the box, i.e [(ngModel)] equals the following

[ngModel]="someVariable" (ngModelChange)="someMethod($event)"

So now you are using both the "banana in the box" and ngModelChange, so I recommend you use either it, or then the one-way-binding and ngModelChange.

But back to your code and making the reference, it can be made when you build the form:

this.myForm = this.fb.group({
  // find the object in the infos array that matched the value of loggeduser
  info: [this.infos.find(x => x.id == this.loggedUser.info).id]
})

If this the retrieval of values for loggedUser is asynchronous, you need to either wait to build the form until value can be set, or you initially build an empty form and patch the values once they have been retrieved.

Hope this helps, and here's a Plunker to play with.

Hi, Thanks for your comment. If use ngModel and ngModelChange is because the options array of a second select depends on the value of the first. The value of a loggedUser is sync and inmediate but the values of the options (infos) for the selects are asynchronous. I build initially the form on `constructor()` and in the `ngOnInit()` method initialize the value of loggeduser and then the value of infos array. All other inputs value are initialized correctly. I think that the problem is how to compare selected options with a object property — Hanzo, May 14 '17 at 09:19
I'm not sure really what you mean, but the above shows how to bind the object with the form control? Isn't that what you mean? If not, could you please fork the plunker and put your code there, which showcases the issue, because otherwise I'd have to just "guess" how your code looks like. — AT82, May 14 '17 at 09:53
Just update Material design library to beta 5 and now all works fine... o_0 — Hanzo, May 14 '17 at 11:40

md-select not binding with object.value

1 Answers1