mat-select possibly formControlName problem

Question

I have different question types and I'm trying to create a new one: a dropdown list with images. To do this, I use Angular Material. When an option is selected, I'm normally able to show an image on the screen. I know that this part works because I used it in several different locations inside my code. I actually reuse almost everything, here's my classic dropdown list (dropdown-list.html):

<div [formGroup]="form" class="form-groups">
  <label [attr.for]="'q_dd_' + question.id" class="col-sm-2 col-form-label question-title" id="title"
    [ngClass]="{'disabled-text': form.get(question.id).disabled}">{{question.label}}</label>
  <app-help-image [question]="question" class="col-sm-1"></app-help-image>
  <div class="field-position">
    <select [id]="'q_dd_' + question.id" [formControlName]="question.id" [compareWith]="optionComparer"
      class="custom-select form-control input-style">
      <option></option>
      <option *ngFor="let opt of (question.rule.outputs$ | async)" [ngValue]="opt" class="input-style">{{opt.label}}</option>
    </select>
    <app-validation-messages [question]="question"></app-validation-messages>
  </div>
</div>

Here's the dropdown list that I'm trying to create(dropdown-list-with-images.html):

<form [formGroup]="form">
    <mat-form-field appearance="outline">
        <mat-label [attr.for]="'q_ddi_' + question.id" [ngClass]="{'disabled-text': form.get(question.id).disabled}">{{question.label}}</mat-label>
        <mat-select  [id]="'q_ddi_' + question.id" [formControlName]="question.id" [compareWith]="optionComparer" (selectionChange)="onRoomChange($event)">
            <mat-select-trigger>
                <span *ngIf="selectedOption">
                    <img [src]="selectedOption.fullImageUrl">
                    {{selectedOption.label}} 
                </span>
            </mat-select-trigger>
            <mat-option></mat-option>
            <mat-option *ngFor="let opt of (question.rule.outputs$ | async)" [value]="opt" >
                <img [src]="opt.fullImageUrl" [alt]="opt.label">
                {{opt.label}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</form>

So as you can see I'm basically trying to do the same thing with Angular Material but it doesn't seem to work. Even though I'm sure, I suspect the error is caused by formControlName . Am I missing something?

Answer 1

Posting this possible answer here instead of in the comments, but have you tried using a formGroupName?

I assume that in your definition of your form, you probably have something like this:

question: this.fb.group({...})

Where this.fb is the form builder defined in the constructor. As such try in your HTML the following:

<form [formGroup]="form" >
   <ng-container formGroupName="question">
      <mat-form-field appearance="outline">
        <mat-label [attr.for]="'q_ddi_' + question.id" [ngClass]="{'disabled-text': form.get(question.id).disabled}">{{question.label}}</mat-label>
        <mat-select  [id]="'q_ddi_' + question.id" [formControlName]="id" [compareWith]="optionComparer" (selectionChange)="onRoomChange($event)">
            <mat-select-trigger>
                <span *ngIf="selectedOption">
                    <img [src]="selectedOption.fullImageUrl">
                    {{selectedOption.label}} 
                </span>
            </mat-select-trigger>
            <mat-option></mat-option>
            <mat-option *ngFor="let opt of (question.rule.outputs$ | async)" [value]="opt" >
                <img [src]="opt.fullImageUrl" [alt]="opt.label">
                {{opt.label}}
            </mat-option>
        </mat-select>
    </mat-form-field>
   </ng-container>
</form>

One question I do still have is that in your first example, the none mat select, your formGroup is defined as part of a regular div, whereas in the mat-select version it is actually wrapped as its own <form> element, is this on purpose?