mat-form-field必须包含MatFormFieldControl [英] mat-form-field must contain a MatFormFieldControl
问题描述
我们正在尝试在我们的公司构建自己的form-field-Components.我们正在尝试像这样包装材料设计的组件:
We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this:
字段:
<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投影.
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.
这是一场闪电战: https://stackblitz.com/edit/angular-xpvwzf
推荐答案
不幸的是,尚不支持将内容投影到mat-form-field中. 请跟踪以下 github问题以获取有关此问题的最新消息.
Unfortunately content projection into mat-form-field is not supported yet. Please track the following github issue to get the latest news about it.
现在,唯一适合您的解决方案是将内容直接放入mat-form-field组件中,或者实现MatFormFieldControl类,从而创建自定义表单字段组件.
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屋!