问题
我们正在尝试在公司构建我们自己的表单域组件。我们正在尝试将材料设计的组件包装如下：

字段：

1. <mat-form-field>
   
2.     <ng-content></ng-content>
   
3.     <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
   
4.     <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
   
5.     <mat-error>This field is required</mat-error>
   
6. </mat-form-field>

复制代码

文本框：

1. <field hint="hint">
   
2.     <input matInput
   
3.     [placeholder]="placeholder"
   
4.     [value]="value"
   
5.     (change)="onChange($event)"
   
6.     (keydown)="onKeydown($event)"
   
7.     (keyup)="onKeyup($event)"
   
8.     (keypress)="onKeypress($event)">
   
9. </field>

复制代码

用法：

<文本框值=“测试”提示=“我的提示”></textbox>

结果大致如下：

1.     <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
   
2.        <field>
   
3.           <mat-form-field class="mat-input-container mat-form-field>
   
4.              <div class="mat-input-wrapper mat-form-field-wrapper">
   
5.                 <div class="mat-input-flex mat-form-field-flex">
   
6.                    <div class="mat-input-infix mat-form-field-infix">
   
7.                       <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">
   
8.                       <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
   
9.                    </div>
   
10.                 </div>
    
11.                 <div class="mat-input-underline mat-form-field-underline">
    
12.                    <span class="mat-input-ripple mat-form-field-ripple"></span>
    
13.                 </div>
    
14.                 <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
    
15.              </div>
    
16.           </mat-form-field>
    
17.        </field>
    
18.     </textbox>

复制代码

但我得到“mat form field must contain MatFormFieldControl”；在控制台中。我想这与不直接包含 matInput 字段的 mat 表单字段有关。但它包含它，它只是通过 ng 内容进行投影。

这是闪电战：

回答
不幸的是，尚不支持将内容投影到 mat 表单字段中。

请关注以下 github issue 以获取有关它的最新消息。

目前，你唯一的解决方案是将内容直接放入 mat 表单域组件中，或者实现 MatFormFieldControl 类，从而创建自定义表单域组件。

问题
我们正在尝试在公司构建我们自己的表单域组件。我们正在尝试将材料设计的组件包装如下：

字段：

1. <mat-form-field>
   
2.     <ng-content></ng-content>
   
3.     <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint>
   
4.     <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
   
5.     <mat-error>This field is required</mat-error>
   
6. </mat-form-field>

复制代码

文本框：

1. <field hint="hint">
   
2.     <input matInput
   
3.     [placeholder]="placeholder"
   
4.     [value]="value"
   
5.     (change)="onChange($event)"
   
6.     (keydown)="onKeydown($event)"
   
7.     (keyup)="onKeyup($event)"
   
8.     (keypress)="onKeypress($event)">
   
9. </field>

复制代码

用法：

<文本框值=“测试”提示=“我的提示”></textbox>

结果大致如下：

1.     <textbox  placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer">
   
2.        <field>
   
3.           <mat-form-field class="mat-input-container mat-form-field>
   
4.              <div class="mat-input-wrapper mat-form-field-wrapper">
   
5.                 <div class="mat-input-flex mat-form-field-flex">
   
6.                    <div class="mat-input-infix mat-form-field-infix">
   
7.                       <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">
   
8.                       <span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"></span>
   
9.                    </div>
   
10.                 </div>
    
11.                 <div class="mat-input-underline mat-form-field-underline">
    
12.                    <span class="mat-input-ripple mat-form-field-ripple"></span>
    
13.                 </div>
    
14.                 <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"></div>
    
15.              </div>
    
16.           </mat-form-field>
    
17.        </field>
    
18.     </textbox>

复制代码

但我得到“mat form field must contain MatFormFieldControl”；在控制台中。我想这与不直接包含 matInput 字段的 mat 表单字段有关。但它包含它，它只是通过 ng 内容进行投影。

这是闪电战：

回答
不幸的是，尚不支持将内容投影到 mat 表单字段中。

请关注以下 github issue 以获取有关它的最新消息。

目前，你唯一的解决方案是将内容直接放入 mat 表单域组件中，或者实现 MatFormFieldControl 类，从而创建自定义表单域组件。