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

当前回答

我不小心从输入字段中删除了matInput指令，这导致了同样的错误。

eg.

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

固定的代码

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

2019-05-21 14:05:20

其他回答

未捕获错误:mat-form-field必须包含MatFormFieldControl。

此错误发生在导入中遗漏'MatInputModule'时，

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

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

在模块中导入MatInputModule。t文件将有助于摆脱这个问题。

2021-07-30 06:02:50

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

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

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

更多信息请点击这里。

2017-10-17 17:06:09

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

您可能忘记导入MatInputModule

2019-09-10 08:12:00

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

例如，我收到了相同的mat-form-field必须包含一个MatFormFieldControl错误消息，在意外地将一个必需的属性放在自关闭斜杠/之后，这有效地使我的<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必须包含一个MatFormFieldControl错误。不管怎样，这只是调试时要注意的另一件事。

2019-06-15 21:09:40

mat-form-field必须包含MatFormFieldControl

推荐文章

最新文章

标签