Mat-form-field 必须包含 MatFormFieldControl 错误，使用 *ngIf

Question

当我在 <mat-select> 中设置 *ngIf 条件时出现此错误。

<mat-form-field appearance="legacy">
    <mat-label>LOCATION</mat-label>
    <mat-select *ngIf="exampleObject.innerObject"  [(value)]="exampleObject.innerObject.id">
        <ng-container *ngFor="let innerObject of arrays">
            <mat-option [value]="innerObject.id">{{innerObject.location}}</mat-option>
        </ng-container>
    </mat-select>
</mat-form-field>

我的问题是当对象 id 为空时，它在数据库中不存在。我想在下拉列表中显示一个空字段，但它在这一行崩溃 [(value)]="voipDc.hepic.id"。

Answer 1

当您使用 <mat-form-field> 时，表单字段控件必须在其中。如 Form field | Angular Material > Error: mat-form-field must contain a MatFormFieldControl.

中所述

已更新：删除了以前的版本，因为 [(value)] 中不支持可选链接。

您可以使用 && 运算符来检查 exampleObject.innerObject 和 exampleObject.innerObject.id 是否都具有值。

这与可选链接的工作方式类似，以逃避潜在的属性是 null 或 undefined 并停止访问嵌套的属性.

<mat-select
  [(value)]="exampleObject.innerObject && exampleObject.innerObject.id"
>
  ...
</mat-select>

Sample Solution on StackBlitz

Mat-form-field 必须包含 MatFormFieldControl 错误，使用 *ngIf

Mat-form-field must contain a MatFormFieldControl Error, Using *ngIf

angular

angular-material

mat-form-field