mat表单字段必须包含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”。我想这与不直接包含matInput-field的mat-form-field有关。但它包含它，它只是在ng内容投影中。

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

Answer 1

在模块中导入MatInputModule。ts文件，它将解决问题。

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

后面的陈述是老答案。

遗憾的是，还不支持将内容投影到mat表单字段中。请跟踪以下github问题以获取有关它的最新消息。

到目前为止，您唯一的解决方案是将内容直接放入< code>mat-form-field组件，或者实现一个< code>MatFormFieldControl类，从而创建一个自定义的表单域组件。

Answer 2

将MatInputModule和MatFormFieldModule导入模块内部，即

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

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

请务必添加 matInput，并且区分大小写。

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

检查您在输入标签上没有任何条件在任何情况下都是假的，因为mat-form-field在其中查找matIn的。而是将*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指出了第三个问题

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

ng serve

Answer 3

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

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

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

更多信息在这里。