таемся создать наши собственные компоненты поля формы в нашей компании. Мы пытаемся обернуть компоненты дизайна материала следующим образом:

поле:

<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. Но он содержит его, он просто проецирует нг-контент.

Вот блиц:https://stackblitz.com/edit/angular-xpvwzf