mat-form-field必须包含MatFormFieldControl

我们正试图在我们公司建立我们自己的形式场组件。我们试图这样包装材料设计的组件:

字段:

<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字段有关。但它包含了它，只是在ng-content投影中。

以下是闪电战: https://stackblitz.com/edit/angular-xpvwzf

当前回答

这里引用官方文件:

错误:mat-form-field必须包含MatFormFieldControl 当您没有将表单字段控件添加到表单字段时，将发生此错误。如果你的表单字段包含一个原生的<input>或<textarea>元素，确保你已经添加了matInput指令，并导入了MatInputModule。其他可以充当表单字段控件的组件包括<mat-select>、<mat-chip-list>以及您已创建的任何自定义表单字段控件。

在这里了解更多关于创建“自定义表单字段控件”的信息

2018-02-16 08:04:03

其他回答

新更新的MatInput模块导入是:

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

根据Angular Materials API

2020-07-06 08:39:58

当错误地将输入放置在mat-form-field之外时，也会出现此错误。要修复它，就像下面这样把它带进去:

糟糕的代码:

<mat-form-field class="full-width">
</mat-form-field>
<input matInput placeholder="Title" formControlName="title" #title />

Fix:

<mat-form-field class="full-width">
    <input matInput placeholder="Title" formControlName="title" #title />
</mat-form-field>

2020-10-26 10:08:46

如果你在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为mat-form-field提出了一个替代方案:move *ngIf:

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

2018-11-22 15:26:41

如果mat-form-field下有input标签，那么每个输入都必须有matInput

2021-12-02 17:52:55

我得到了同样的问题，由于评论元素如下。

<mat-form-field>
    <mat-label>Database</mat-label>
    <!-- <mat-select>
        <mat-option *ngFor="let q of queries" [value]="q.id">
            {{q.name}}
        </mat-option>
    </mat-select>  -->
</mat-form-field>

表单字段应该有元素!(例如输入，文本区域，选择等)

2020-02-11 08:57:50

mat-form-field必须包含MatFormFieldControl

推荐文章

最新文章

标签