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

当前回答

MatRadioModule不能在MatFormField中工作。医生说

当您没有将表单字段控件添加到您的表单字段。如果您的表单字段包含原生或元素，确保你已经添加了matInput指令到它 MatInputModule进口。可以充当表单字段的其他组件控件包括< mat-select>， < mat-chip-list>和任何自定义表单您所创建的字段控件。

2019-07-03 05:18:58

其他回答

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

不要忘记在前面添加< table> </table>

 <mat-form-field>
        <mat-label>Filter</mat-label>
        <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Helium" #input>
      </mat-form-field>

不要忘记在最后添加< table> </table>

<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">
   No data matching the filter "{{input.value}}"
</td>
</tr>

2021-02-11 11:54:08

我不确定它是否可以这么简单，但我有同样的问题，在输入字段中将“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">

“垫输入”

2017-10-15 19:51:27

请注意当我们在提交按钮周围使用“mat-form-field”标签时，有时会出现错误:

<mat-form-field class="example-full-width">
   <button mat-raised-button type="submit" color="primary">  Login</button>
   </mat-form-field>

所以请不要在提交按钮周围使用这个标签

2019-11-20 01:50:00

问题1:MatInputModule未导入

在模块中导入MatInputModule和MatFormFieldModule，即app.module.ts

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

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

问题2:matInput -拼写错误/忘记添加

一定要添加matInput，它是区分大小写的。

<mat-form-field>
    <input matInput type="text" />
</mat-form-field>

问题3:无效的*ngIf放置

检查input标签上是否有任何条件在任何情况下都会为假，因为mat-form-field会在其中查找matInput。相反，把*ngIf放在mat-form-field标签上。

<mat-form-field>
   <input matInput *ngIf="someCondition"> // don't add condition here, else add in mat-form-field tag
</mat-form-field>

感谢@William Herrmann指出了这个问题#3

问题4:编译器仍然给出错误

如果angular编译器在修复上述问题后仍然报错，那么你必须尝试重新启动应用程序。

ng serve

2018-04-24 12:54:23

你可以尝试按照这个指南来实现/提供你自己的MatFormFieldControl

2019-02-25 01:14:00

mat-form-field必须包含MatFormFieldControl

推荐文章

最新文章

标签