Angular Material表单添加mat-checkbox后样式异常求助

在Angular Material表单中添加mat-checkbox时，若将其嵌套在mat-form-field内部会导致页面样式错乱——初始仅保留输入框时页面显示正常，取消checkbox注释后，表单元素布局偏移、标签位置异常。

问题根源 #

mat-form-field是Angular Material专为输入类组件（如matInput、matSelect等）设计的容器，mat-checkbox不属于这类组件，强行嵌套会触发内置样式冲突，破坏页面布局。

修正代码 #

只需将mat-checkbox从mat-form-field中移出，直接使用即可：

修改后的HTML代码

<form>
  <mat-form-field>
    <mat-label>Some label</mat-label>
    <input type="number" matInput [formControl]="companyNameFormControl">
  </mat-form-field>
  <!-- 移除mat-form-field容器，直接使用mat-checkbox -->
  <mat-checkbox [formControl]="checkboxFormControl">Another label</mat-checkbox>
</form>

组件类补充（若需绑定表单控件）
在app.component.ts中新增checkbox对应的FormControl：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  companyNameFormControl = new FormControl('');
  // 新增checkbox的表单控件
  checkboxFormControl = new FormControl(false);
}

其他说明 #

你的应用模块代码无需修改，已正确导入MatCheckboxModule、表单模块及其他必要依赖。

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