Angular材料导入mat-checkbox时出错

Question

我在使用Angular Material时遇到了一些麻烦,我尝试了很多解决方案,但没有一个能够解决问题.这就是我想要做的:

我正在使用Angular Material with Reactive Forms来制作register表单,一切都很好,直到我添加了一个mat-checkbox组件.这是error我得到的:

错误错误:mat-form-field必须包含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工作正常,实现了表单控件名称,我仍然保持不变error.我试图mat-checkbox在没有mat-form-field容器的情况下包含我的html,它完美无缺,但是我真的需要使用表单字段,因为我想添加一些mat-error组件来显示验证消息.

有谁知道我错过了什么？

Answer 1

该错误意味着表单字段无法在其中找到兼容的材料输入.

不要<mat-checkbox>在里面使用<mat-form-field>.

以下Angular Material组件设计用于<mat-form-field>:

• <input matInput> & <textarea matInput>

• <mat-select>

• <mat-chip-list>

资料来源:官方文件