Поле mat-form-field должно содержать MatFormFieldControl и уже импортировано

Question

Я получаю ошибку ERROR mat-form-field must contain a MatFormFieldControl, которая должна означать, что мне нужно импортировать MatFormFieldModule в мой ближайший родительский модуль.Но я уже сделал, поэтому я не понимаю, в чем проблема ...

шаблон

<form [formGroup]="form" (ngSubmit)="handleSubmit()">
    <mat-form-field>
        <input matInput placeholder="Name" formControlName="name" />
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Active Description"
            formControlName="activeDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Inactive Description"
            formControlName="inactiveDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-checkbox formControlName="active">Active</mat-checkbox>
    </mat-form-field>
</form>

модуль

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { PaymentConfigSelectorComponent } from './payment-config-selector/payment-config-selector.component';
import { PaymentMethodComponent } from './payment-method/payment-method.component';
import { PaymentMethodsComponent } from './payment-methods/payment-methods.component';
import { PaymentRoutingModule } from './payment-routing.module';
import { PaymentEffects } from './payment.effects';
import { paymentReducer } from './payment.reducer';
import { PaymentSmartComponent } from './smart/payment-smart.component';

@NgModule({
  declarations: [PaymentSmartComponent, PaymentMethodsComponent, PaymentConfigSelectorComponent, PaymentMethodComponent ],
  imports: [
    CommonModule,
    PaymentRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    EffectsModule.forFeature([PaymentEffects]),
    StoreModule.forFeature(
      'payment',
      paymentReducer,
    ),
    MatFormFieldModule, MatInputModule, MatSelectModule, MatCheckboxModule, MatButtonModule,
  ],
  providers: [
  ],
})
export class PaymentModule { }

Answer 1

На самом деле ошибка не означает проблему импорта модуля, но вы используете mat-form-field без действительного элемента управления.

Проблема здесь:

<mat-form-field>
    <mat-checkbox formControlName="active">Active</mat-checkbox>
</mat-form-field>

MatChebox не должен содержаться в mat-form-field.Juste снимаю контейнер