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” 。我想这与不直接包含 matInput-field 的 mat-form-field 有关。但它包含它，它只是带有 ng-content 投影。

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

原文由 Viktor Eriksson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在你的 module.ts 文件中导入 MatInputModule 即可解决问题。

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

后面的语句是旧答案。

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

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

原文由 n.yakovenko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Zia Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议