мат-форма-поле должно содержать MatFormFieldControl

Question

мат-форма-поле должно содержать MatFormFieldControl

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

Поле:

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

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

600 6

angular angular-material2

6 ответов:

Comments

Ничего не найдено.

n.yakovenko · Accepted Answer · 2018-04-04 21:51:27

К сожалению, проекция контента в поле мат-формы пока не поддерживается. Пожалуйста, отследите следующий выпускgithub , чтобы узнать последние новости о нем.

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

darksoulsong · Accepted Answer · 2017-10-17 20:06:09

У меня была такая проблема. Я импортировал MatFormFieldModule в свой основной модуль, но забыл добавить MatInputModule в массив imports, например:
import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }
Надеюсь, это поможет.

Подробнее здесь.

WasiF · Accepted Answer · 2018-09-27 10:44:25

Решение 1

Импорт MatInputModule внутри app.module.ts
@NgModule({
  declarations: [
       // ......
  ],
  imports: [
     // .......
     MatInputModule
     // .......
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
Решение 2

Проверьте написание matInput, Убедитесь, что оно чувствительно к регистру
<input matInput type="text" />

user158 · Accepted Answer · 2018-02-16 10:04:03

Цитирую из официальной документации здесь:

Ошибка: мат-форма-поле должно содержать MatFormFieldControl

Эта ошибка возникает, когда вы не добавили элемент управления полем формы в свой поле формы. Если поле формы содержит родной или элемент, убедитесь, что вы добавили к нему директиву matInput и имеете импортированный MatInputModule. Другие компоненты, которые могут выступать в качестве поля формы управление включает,, и любую пользовательскую форму полевые элементы управления у вас есть созданный.

ReturnTable · Accepted Answer · 2017-10-15 22:51:27

Я не уверен, что это может быть так просто, но у меня была та же проблема, изменение "mat-input" на "matInput" в поле ввода решило проблему. В вашем случае я вижу "matinput", и это приводит к тому, что мое приложение выдает ту же ошибку.
<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">
"matinput"

"matInput"

user9001817 · Accepted Answer · 2018-05-19 15:47:10

У меня тоже была эта проблема, и у меня есть элемент <mat-select> в моем шаблоне, когда я импортирую MatSelectModule в модуль, это работает, это не делает науку, но все еще надеюсь, что это может помочь вам.
`import { MatSelectModule } from '@angular/material/select';

`
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    MatFormFieldModule,
    MatProgressSpinnerModule,
    MatInputModule,
    MatCardModule,
    MatSelectModule
  ],`
`
  <div class="example-container">
      <mat-form-field>
        <input matInput placeholder="Input">
      </mat-form-field>

      <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
      </mat-form-field>

      <mat-form-field>
        <mat-select placeholder="Select">
          <mat-option value="option">Option</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
`