mat-form-field 必须包含一个 MatFormFieldControl 并且已经导入

Posted

技术标签:

【中文标题】mat-form-field 必须包含一个 MatFormFieldControl 并且已经导入【英文标题】:mat-form-field must contain a MatFormFieldControl and already imported 【发布时间】:2019-06-24 22:21:26 【问题描述】:

我收到错误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  

【问题讨论】:

【参考方案1】:

实际上该错误并不意味着模块导入问题,而是您在没有有效控件的情况下使用mat-form-field

问题就在这里:

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

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

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

【讨论】:

谢谢,没错。但我认为这没有任何意义,因为它确实是一个表单“字段”——或者至少是表单的一部分。但是感谢您的解决方案。 是的,这个名字很糟糕。它更像是一个mat-form-text-field,因为它是添加下划线+提示+浮动标签+错误的组件......等等 mat-checkbox 是否可以使用 mat-form-field 的替代方法?因为我所有的表单字段都使用 mat-form-field,除了一个复选框,所以这个没有与其他字段对齐。【参考方案2】:

我通过添加隐藏的输入字段解决了这个问题。

<mat-form-field>
 <mat-label>My Label</mat-label>
 <input matInput [hidden]="true" [(ngModel)]="myModel" name="myModel">
 <mat-checkbox class="ml-3" [(ngModel)]="myModel" name="myModel"></mat-checkbox>
</mat-form-field>

【讨论】:

【参考方案3】:

对我来说,我使用的是材质,但需要添加 import MatInputModule from '@angular/material/input';

到我的模块,然后添加 MatInputModule 到我的imports 数组。

确保您在父模块中导入了使用所需的所有内容。

【讨论】:

这可能不是问题的最常见来源,但它正是我做错的。谢谢。【参考方案4】:

使用带有“mat-form-field”类的“div”对我有用:

<div class="mat-form-field">
    <mat-checkbox formControlName="didAcceptTerms">
        <span
        [innerhtml]="'booking.submit.didAcceptTerms.lbl'|translate"></span>
    </mat-checkbox>
    <mat-error *ngIf="f.didAcceptTerms.errors">
         'booking.submit.didAcceptTerms.error' | translate 
    </mat-error>    
</div>    

【讨论】:

【参考方案5】:

我必须这样做才能让它工作:-

<mat-form-field>
  <input hidden=true matInput> // this gets rid of the error, while the form still uses the input received in the
  mat-checkbox
  <mat-checkbox matInput formControlName="active">Active</mat-checkbox>
</mat-form-field>

【讨论】:

以上是关于mat-form-field 必须包含一个 MatFormFieldControl 并且已经导入的主要内容,如果未能解决你的问题,请参考以下文章

mat-list 的 formControlName 给出 'mat-form-field 必须包含 MatFormFieldControl'

Angular Material 表单问题:角度 mat-form-field 必须包含 MatFormFieldControl

ngx-mat-file-input mat-form-field 必须包含一个 MatFormFieldControl

ERROR 错误:使用 API 文档时,mat-form-field 必须包含 MatFormFieldControl?

浏览器控制台中的错误 mat-form-field 必须包含 MatFormFieldControl

Angular 4 mat-form-field with mat-select