mat-form-field 必须包含一个 MatFormFieldControl 并且已经导入 [英] mat-form-field must contain a MatFormFieldControl and already imported

问题描述

我收到错误 ERROR mat-form-field must contains a MatFormFieldControl 这应该意味着我需要在离我最近的父模块中导入 MatFormFieldModule.但是我已经这样做了，所以我不明白问题是什么...

I get the error ERROR mat-form-field must contain a MatFormFieldControl which should mean that I need to import MatFormFieldModule in my nearest parent module. But I already did, so I don't understand what the problem is...

模板

<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 { }

推荐答案

实际上该错误并不意味着模块导入问题，而是您使用的 mat-form-field 没有有效控制.

Actually the error doesn't mean a module import problem, but that you're using the mat-form-field without a valid control.

问题出在这里:

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

MatChebox 不打算包含在 mat-form-field 中，但是它的名字不是很清楚......请记住 mat-form-field是处理下划线+提示+浮动标签+错误等的组件...

MatChebox isn't intended to be contained in a mat-form-field but yeah its name is not very clear ... Keep just in mind that mat-form-field is the component that handles underline + hint + floating label + errors, etc ...

支持的子组件列表为:input/textarea/select/chip-list(见https://material.angular.io/components/form-field/overview)

The list of supported child component is : input / textarea / select / chip-list (see https://material.angular.io/components/form-field/overview)

这篇关于mat-form-field 必须包含一个 MatFormFieldControl 并且已经导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！