mat-form-field 必须包含一个 MatFormFieldControl [英] mat-form-field must contain a MatFormFieldControl

问题描述

我们正在尝试在我们的公司构建我们自己的表单域组件.我们正在尝试像这样包装材料设计的组件:

字段:

<ng-content></ng-content><mat-h​​int align="start"><strong>{{hint}}</strong></mat-h​​int><mat-h​​int align="end">{{message.value.length}}/256</mat-h​​int><mat-error>这个字段是必填的</mat-error></mat-form-field>

文本框:

<输入垫输入[占位符]="占位符"[价值]="价值"(change)="onChange($event)"(keydown)="onKeydown($event)"(keyup)="onKeyup($event)"(keypress)="onKeypress($event)"></field>

用法:

</textbox>

这大致是这样的:

 <字段><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 class="mat-input-underline mat-form-field-underline"><span class="mat-input-ripple mat-form-field-ripple"></span>

<div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>

</mat-form-field></field></文本框>

但我在控制台中收到 mat-form-field 必须包含一个 MatFormFieldControl".我想这与不直接包含 matInput-field 的 mat-form-field 有关.但它包含它，它只是与 ng-content 投影.

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

解决方案

在你的 module.ts 文件中导入 MatInputModule，它将解决问题.

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

后面的语句是旧答案.

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

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

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this:

field:

<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>

textbox:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

Usage:

<textbox value="test" hint="my hint"></textbox>

This results in approximately this:

    <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>

But I'm getting "mat-form-field must contain a MatFormFieldControl" in the console. I guess this has to do with mat-form-field not directly containing a matInput-field. But it is containing it, it's just withing the ng-content projection.

Here is a blitz: https://stackblitz.com/edit/angular-xpvwzf

解决方案

Import MatInputModule in your module.ts file and it will solve the problem.

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

The statement after it is the old answer.

Unfortunately content projection into mat-form-field is not supported yet. Please track the following github issue to get the latest news about it.

By now the only solution for you is either place your content directly into mat-form-field component or implement a MatFormFieldControl class thus creating a custom form field component.

这篇关于mat-form-field 必须包含一个 MatFormFieldControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！