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?