当导入mat-checkbox时，Angular Material出现错误。

Question

我在使用Angular Material时遇到了一些问题，尝试了许多解决方案但都不起作用。这是我想要做的事情：

我正在使用Angular Material和响应式表单来制作一个register表单，一切都很顺利，直到我添加了mat-checkbox组件。这是我收到的error：

ERROR Error: mat-form-field must contain a MatFormFieldControl.

以下是我的代码：

HTML：

<mat-form-field>
   <mat-checkbox formControlName="check">
      Check me!
   </mat-checkbox>
</mat-form-field>

组件:

this.registerForm = this.formBuilder.group({
    name: ['', Validators.required ],
    email: ['', Validators.required],
    check: ['', Validators.required ]
});

模块：

import { ReactiveFormsModule } from '@angular/forms';
import { RegisterFormComponent } from './register-form.component';
import { MatCheckboxModule } from '@angular/material';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
 imports: [
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatCheckboxModule,
    BrowserAnimationsModule
 ],
 declarations: [
    RegisterFormComponent
 ]
})

export class RegisterFormModule { }

我导入了模块，以便使Angular Material正常工作，并实现了表单控件名称，但我仍然遇到相同的错误。我尝试在我的html中包含mat-checkbox而不使用mat-form-field容器，它可以完美地工作且没有错误，但我真的需要使用表单字段，因为我想添加一些mat-error组件来显示验证消息。

有人知道我漏掉了什么吗？

- Daniela Cortes

---

尝试在formControlName中添加一个名为name="check"的属性。 - Prachi

Answer 1

这个错误意味着表单字段内找不到兼容的材料输入。

不要在<mat-form-field>内使用<mat-checkbox>。

以下Angular Material组件设计为在<mat-form-field>中使用：

• <input matNativeControl> 和 <textarea matNativeControl> (版本7及更高版本)

• <select matNativeControl> (版本7及更高版本)

• <input matInput> 和 <textarea matInput> (版本5和6)

• <mat-select>

• <mat-chip-list>

来源: 官方文档

- kvetis

---

AngularMD团队做出的决定非常奇怪——现在我该如何垂直对齐两个表单字段，其中一个是带有input的mat-form-field，另一个是复选框，但不能使用具有垂直布局样式的mat-form-field... 无法理解为什么mat-checkbox不被视为有效的表单字段。 - JustAMartin

请查看此文档页面 https://material.angular.io/components/checkbox/examples - Wahéb

Answer 2

当我查看复选框文档时，我发现复选框的使用在表单中得到了支持，包括反应式和模板驱动。我可以按照以下方式在表单中创建复选框。

<mat-form-field class="full-width">
    <mat-checkbox [(ngModel)]="selectedCourse.favorite" name="favorite">
        Favorite
        <input matInput>
    </mat-checkbox>
</mat-form-field>

- MrAlbino

---

看起来像是黑客攻击；不知道UI看起来怎么样。这可能会破坏其他东西，而且这不是AngularMD推荐的方式。我建议避免这样做。 - Mojtaba