mat-select 可能是 formControlName 問題

Question

我有不同的問題類型，我正在嘗試創建一個新問題：帶有圖像的下拉列表。 為此，我使用 Angular 材料。 選擇一個選項后，我通常可以在屏幕上顯示圖像。 我知道這部分有效，因為我在代碼中的幾個不同位置使用了它。 我實際上重用了幾乎所有東西，這是我的經典下拉列表（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>

這是我要創建的下拉列表（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>

如您所見，我基本上是在嘗試對 Angular 材料做同樣的事情，但它似乎不起作用。 即使我確定，我懷疑錯誤是由formControlName引起的。 我錯過了什么嗎？

Answer 1

在此處而不是在評論中發布這個可能的答案，但是您是否嘗試過使用 formGroupName？

我假設在您對表單的定義中，您可能有以下內容：

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

其中 this.fb 是構造函數中定義的表單構建器。 因此，在您的 HTML 中嘗試以下操作：

<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>

我仍然有一個問題是，在您的第一個示例中，無墊 select，您的 formGroup 被定義為常規 div 的一部分，而在 mat-select 版本中，它實際上被包裝為自己的<form>元素，是這樣故意？