Угловой материал Ошибка при импорте флажка

Question

У меня проблемы с Angular Material, я пробовал много решений, но ни одно из них не работает.Вот что я пытаюсь сделать:

Я использую Angular Material с 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 в мой html без контейнера поля mat-form-field, и он прекрасно работает без ошибок, но мне действительно нужно использовать поле формы, потому что я хочу добавить некоторыекомпоненты ошибок для отображения проверочных сообщений.

Кто-нибудь знает, что мне не хватает?

Answer 1

В таком случае, почему угловой мате-вирусный сайт показывает этот пример в той же ссылке с мат-радиогруппой, используемой с 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>

Answer 2

Ошибка означает, что поле формы не может найти в нем совместимый материал.

Не используйте <mat-checkbox> внутри <mat-form-field>.

Следующие компоненты углового материала предназначены для работы внутри <mat-form-field>:

• <input matInput> & <textarea matInput>

• <mat-select>

• <mat-chip-list>

Источник: Официальные документы