引入mat-checkbox时Angular Material报错，求解决方案

我刚帮你排查了这个问题，根源其实很清晰：mat-checkbox并不是实现了MatFormFieldControl的组件，所以不能直接放在<mat-form-field>标签内部——这就是你触发ERROR Error: mat-form-field must contain a MatFormFieldControl.错误的原因。

你的模块导入和表单配置都是正确的，问题只出在HTML结构上。要保留mat-error验证提示，完全不需要把checkbox嵌套在mat-form-field里，我们可以换一种结构实现需求：

修正后的HTML代码 #

<!-- 用自定义容器包裹复选框和错误提示 -->
<div class="checkbox-group">
  <mat-checkbox formControlName="check"> Check me! </mat-checkbox>
  <!-- 借助表单控件的状态触发错误提示 -->
  <mat-error *ngIf="registerForm.get('check').invalid && (registerForm.get('check').touched || registerForm.get('check').dirty)">
    请勾选此选项
  </mat-error>
</div>

组件与模块代码无需调整 #

你Component里的表单构建逻辑、Module里的依赖导入都是完全正确的，不需要做任何修改。

补充说明 #

Angular Material的mat-form-field是为输入类控件（比如mat-input、mat-select这类实现了MatFormFieldControl的组件）设计的，复选框这类选择控件并不适配这个容器。通过上面的结构，我们既保留了完整的表单验证逻辑，又能正常显示mat-error提示，同时也符合Material Design的组件使用规范。

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