Select control, reactiveforms and display value

[gpulido]

Is your feature request related to a problem? Please describe.
I have a reactive form with one control that has to be filled with an object of a type Club:

interface Club{
  name: string;
  url: string;
}

I create a list of clubs, and fill the select with it:

<div fxLayout="row" fxLayoutGap="10px" fxLayout="row" fxLayoutGap="10px grid">
        <mdc-select formControlName="club" label="Club" [helperText]="clubHelper" [outlined]="true" [floatLabel]="true" fxFlex="76%">
          <mdc-menu>
            <mdc-list [avatar]="true">
              <mdc-list-item *ngFor="let club of clubs" [value]="club">
                <img mdcListItemGraphic [src]="club.imageUrl" />{{ club.name }}
              </mdc-list-item>
            </mdc-list>
          </mdc-menu>
        </mdc-select>
        <mdc-select-helper-text #clubHelper [validation]="true">
          <span *ngIf="form.controls['club'].hasError('required')">Club is required</span>
        </mdc-select-helper-text>
        <div fxFlex="10%">
          <img
            *ngIf="form.controls.club.value"
            mdcSelectIcon
            [src]="form.controls.club.value.imageUrl"
            class="proportional-image"
          />
        </div>
      </div>

The problem is that when I select a club from the picker, the formcontrol property is filled property but the selector placeholder is being shown as empty as it doens't know how to represent a "Club".

Describe the solution you'd like
To be able to tell the mdc-select wich property of the binded object should use to represent it without needed to change the formControlName property value

Describe alternatives you've considered
To create two forms properties: club and clubName, and use formControlName = "clubName", and every time an item is selected traverse the list of clubs to find the one with the name and fill the club property of the form manually.

[trimox]

Sounds similar to what occurs with the Lazy Loaded mdc-select example? Investigating

[trimox]

@gpulido Just released v5.0.1. Mind trying to see if resolved with #2060 ?

[gpulido]

@trimox I have reviewed it, and unfortunattely that doesn't solve my use case.
The idea is that if I have for example an array of clubs:

Club : {
name: string,
description: string,
imageUrl: string
}

And I'm using a form to fill a new Contender:

Contender: {
  club: Club,
  name: string
}

If I have a formControl binded to the contender.club property I could just create a select with the list of clubs, that will show the {{club.name}} on the picker but after selecting one of the items (that is a Club) it could be associated to eh formacontrolName.
That part is working (the association) the problem is that the underlining mdc-form-field doesn't know how to show the Club, so it would be nice if we can tell the field which property (or expression) based on the assoiated element (a Club in this case) is used to show the text on the field.

The way I'm solvint it now is to create another "formfield" binded to the club.name property and then after each selection search for the "Club" that match the club.name to associate it to the contender. It works for basic cases, but if there are two clubs with the same name (for example) only the first would be found.

I hope it is more clear now.
Thanks for the support.
Gabriel

[trimox]

Actively working on solution for ya. We need to compare the objects essentially, SelectControlValueAccessor compareWith feature should do the trick.

[gpulido]

Hello, thanks por taking a look. If there is anything that I could test / review let me know.

[trimox]

@gpulido Think we're good to go.

Sample