首页 文章

Angular材料导入mat-checkbox时出错

提问于
浏览 次
4

我在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>

COMPONENT :

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

MODULE :

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-form-field容器的情况下将 mat-checkbox 包含在我的html中并且它完美无缺，但是我确实需要使用表单字段，因为我想添加一些mat-error组件来显示验证消息 .

有谁知道我错过了什么？

angular angular-material angular-reactive-forms

2 回答

  • 0

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

    请勿在 <mat-form-field> 内使用 <mat-checkbox> .

    以下Angular Material组件设计用于<mat-form-field>：<input matInput>＆<textarea matInput> <mat-select> <mat-chip-list>

    资料来源：Official docs

    回复于
  • 4

    在这种情况下，为什么角度材料网站在与mat-radio-group相同的链接中显示此示例与formControlName一起使用 .

    <form class="example-container" [formGroup]="options">
    <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
    <div>
      <label>Float label: </label>`enter code here`
      <mat-radio-group formControlName="floatLabel">
        <mat-radio-button value="auto">Auto</mat-radio-button>
        <mat-radio-button value="always">Always</mat-radio-button>
        <mat-radio-button value="never">Never</mat-radio-button>
      </mat-radio-group>
    </div>
  </form>
    回复于

相关问题