[解決済み] mat-form-field は MatFormFieldControl を含まなければなりません．

質問

当社では、独自のフォームフィールド-コンポーネントを構築しようとしています。マテリアルデザインのコンポーネントをこのようにラッピングしようとしています。

フィールドを作成します。

<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" を含んでいなければなりません。 がコンソールに表示されます。これは mat-form-field が matInput-field を直接含まないことと関係があるのでしょう。しかし、mat-form-field は matInput-field を含んでおり、ng-content projection 内にあるだけです。

ここで、電撃発表です。 https://stackblitz.com/edit/angular-xpvwzf

解決方法は？

module.ts ファイルに MatInputModule をインポートすれば，問題は解決します．

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

そのあとの文は、古い答えです。

へのコンテンツ投影は、残念ながら mat-form-field はまだサポートされていません。 以下を追跡してください。 ギズーブ・イシュー をクリックすると、それに関する最新情報を入手できます。

今までのところ、あなたにとっての唯一の解決策は、あなたのコンテンツを直接 mat-form-field コンポーネントを実装するか MatFormFieldControl クラスを作成し、カスタムフォームフィールドコンポーネントを作成します。