mat-form-field必须包含MatFormFieldControl

Question

我们正在努力在公司建立自己的表格 - 组件.我们试图像这样包装材料设计的组件:

领域:

<mat-form-field>
    <ng-content></ng-content>
    <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
    <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
    <mat-error>This field is required</mat-error>
</mat-form-field>

文本框:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

用法:

<textbox value="test" hint="my hint"></textbox>

这导致大致如下:

    <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
       <field>
          <mat-form-field class="mat-input-container mat-form-field>
             <div class="mat-input-wrapper mat-form-field-wrapper">
                <div class="mat-input-flex mat-form-field-flex">
                   <div class="mat-input-infix mat-form-field-infix">
                      <input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">
                      <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
                   </div>
                </div>
                <div class="mat-input-underline mat-form-field-underline">
                   <span class="mat-input-ripple mat-form-field-ripple"></span>
                </div>
                <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
             </div>
          </mat-form-field>
       </field>
    </textbox>

但是我们在控制台中得到"mat-form-field必须包含MatFormFieldControl".我想这与mat-form-field没有直接包含matInput-field有关.但它包含它,它只是与ng-content投影有关.

这是一个闪电战:https: //stackblitz.com/edit/angular-xpvwzf

Answer 1

我有这个问题.我MatFormFieldModule在我的主模块导入,但忘了添加MatInputModule到imports数组,如下所示:

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

希望能帮助到你.

更多信息在这里.

Answer 2

解决方案1

进口MatInputModule里面app.module.ts

import { MatInputModule } from '@angular/material';

@NgModule({
  imports: [
     // .......
     MatInputModule
     // .......
  ]
})
export class AppModule { }

解决方案2

检查拼写matInput,确保它区分大小写

<input matInput type="text" />

Answer 3

如果有人在尝试嵌套 a 后遇到此错误<mat-checkbox>，请加油！它在<mat-form-field>标签内不起作用。

Answer 4

从官方文档引用在这里:

错误:mat-form-field必须包含MatFormFieldControl

如果尚未将表单字段控件添加到表单字段,则会发生此错误.如果表单字段包含本机或元素,请确保已向其添加了matInput指令并已导入MatInputModule.可以充当表单字段控件的其他组件包括,和您创建的任何自定义表单字段控件.

Answer 5

不幸的是,还不支持将内容投影到mat-form-field中.请跟踪以下github问题以获取有关它的最新消息.

到目前为止,唯一的解决方案是将内容直接放入mat-form-field组件或实现MatFormFieldControl类,从而创建自定义表单字段组件.

Answer 6

import {MatInputModule} from '@angular/material/input';



@NgModule({
    imports: [
        MatInputModule
    ],
    exports: [
        MatInputModule
    ]
})

Answer 7

如果有人试图<mat-radio-group>在<mat-form-field> 下面嵌套一个像下面这样的，你会得到这个错误

         <mat-form-field>
                <!-- <mat-label>Image Position</mat-label> -->
                <mat-radio-group aria-label="Image Position" [(ngModel)]="section.field_1">
                    <mat-radio-button value="left">Left</mat-radio-button>
                    <mat-radio-button value="right">Right</mat-radio-button>
                </mat-radio-group>
            </mat-form-field>

删除父 <mat-form-field>标签

Answer 8

这意味着您没有像这样导入 MatInputModule

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

Answer 9

我也有这个问题，<mat-select>我的模板中有元素，当我将 MatSelectModule 导入模块时，它可以工作，它不会产生科学，但仍然希望它可以帮助你。

import { MatSelectModule } from '@angular/material/select';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
],

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

Answer 10

如果您在mat-form-field内输入了适当的内容，但也有输入，也会发生这种情况ngIf。例如：

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

就我而言，mat-chip-list应该仅在数据加载后才“出现”。但是，执行了验证并且mat-form-field抱怨

mat-form-field必须包含MatFormFieldControl

要修复它，控件必须存在，所以我使用了[hidden]：

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

另一种解决方案是提出Mosta：移动* ngIf为mat-form-field：

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Answer 11

我不确定它是否可以这么简单,但我有同样的问题,在输入字段中将"mat-input"更改为"matInput"解决了问题.在你的情况下,我看到"matinput",它导致我的应用程序抛出相同的错误.

<input _ngcontent-c4="" class="mat-input-element mat-form-field-autofill-control" matinput="" ng-reflect-placeholder="Personnummer/samordningsnummer" ng-reflect-value="" id="mat-input-2" placeholder="Personnummer/samordningsnummer" aria-invalid="false">

"matinput"

"matInput"

Answer 12

角度 9+ ...材料 9+

我注意到 3 个错误可能会导致相同的错误：

1. 确保您已在导入组件的 app.module 或 module.ts 中导入 MatFormFieldModule 和 MatInputModule（如果是嵌套模块）
2. 当您将材质按钮或复选框包装在 mat-form-field 中时。查看可以用mat -form-field 包裹的材质组件列表
3. 当您未能在标记中包含 matInput 时。即<input matInput type =“number”step =“0.01”formControlName =“price”/>

Answer 13

我在一项 Karma 测试中遇到了问题

正如大多数答案已经指出的那样，丢失的模块可能会导致问题，并且也必须在 Karma TestBed 中重新导入它们。另外，我们似乎还需要导入 BrowserAnimationsModule 才能使一切正常工作。

在下面的代码中，我注释了一些可能对您没有用的模块，但其他 4 个导入肯定会有所帮助！

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EventFormComponent ],
      imports: [
        # HttpClientTestingModule,
        # RouterTestingModule,
        ReactiveFormsModule,
        MatFormFieldModule,
        MatInputModule,
        BrowserAnimationsModule,
        # TranslateModule.forRoot(),
      ],
    })
    .compileComponents();
  }));

Answer 14

如果上面的所有主要代码结构/配置答案都不能解决您的问题，那么还有一件事要检查：确保您没有以某种方式使您的<input>标签无效。

例如，我mat-form-field must contain a MatFormFieldControl在不小心将required属性放在自关闭斜杠之后后收到了相同的错误消息/，这实际上使我的<input/>. 换句话说，我是这样做的（见输入标签属性的结尾）：

错误：

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

对：

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

如果您犯了那个错误或其他使您的 无效<input>的mat-form-field must contain a MatFormFieldControl错误，那么您可能会收到错误消息。无论如何，这只是您在调试时要寻找的另一件事。