Angular响应式表单报错：Cannot read properties of undefined (reading 'controlType')

核心问题 #

mat-checkbox 不能嵌套在 mat-form-field 组件内部使用。

mat-form-field 是 Angular Material 专门为 MatInput、MatSelect、MatDatepicker 这类特定表单控件设计的容器组件，它会尝试读取子控件的 controlType 属性来适配样式和交互逻辑，但 mat-checkbox 并不具备这个属性，因此页面加载时会抛出 Cannot read properties of undefined (reading 'controlType') 错误。

修正后的HTML代码 #

移除 mat-form-field 容器，直接在 form 下使用 mat-checkbox：

<form [formGroup]="searchForm">
  <mat-checkbox 
    class="col-sm-12 col-lg-6 w-100 p-3" 
    tabindex="0" 
    name="flg" 
    formControlName="flg" 
    id="flg"
  >
    {{ "APPLICATION.FORMS.CHECKED" | translate }}
  </mat-checkbox>
</form>

补充说明 #

• 原TS代码和模块导入无需修改，保持现有配置即可。
• 如果需要为复选框添加布局样式，直接通过自定义CSS类控制即可，不需要依赖mat-form-field的容器样式。

内容的提问来源于stack exchange，提问作者Doppu