Mat-form field must contain MatFormFieldControl

Question

Mat-form field must contain MatFormFieldControl

We are trying to create our own form field components in our company. We are trying to wrap material design components as follows:

field:

<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>

text field:

<field hint="hint">
    <input matInput 
    [placeholder]="placeholder" 
    [value]="value"
    (change)="onChange($event)" 
    (keydown)="onKeydown($event)" 
    (keyup)="onKeyup($event)" 
    (keypress)="onKeypress($event)">
</field>

Using:

<textbox value="test" hint="my hint"></textbox>

This leads to something like the following:

    <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>

But I get "the mat-form-field should contain MatFormFieldControl" in the console. I assume this is due to the mat-form-field not directly containing the matInput field. But it contains it, it is only in the projection of ng content.

Here is a blitz: https://stackblitz.com/edit/angular-xpvwzf

+116

angular angular-material2

Viktor Eriksson Oct 12 '17 at 8:42

source share

17 answers

. MatFormFieldModule , MatInputModule imports, :

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

, .

.

+303

darksoulsong 17 . '17 17:06

1

MatInputModule app.module.ts

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

@NgModule({
  imports: [
     // .......
     MatInputModule
     // .......
  ]
})
export class AppModule { }

2

matInput, .

<input matInput type="text" />

+55

WasiF 24 . '18 12:54

:

: mat-form MatFormFieldControl
, . , , matInput MatInputModule. , , .

+13

user158 16 . '18 8:04

, mat-form-field, ngIf. :

<mat-form-field>
    <mat-chip-list *ngIf="!_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

mat-chip-list "" . , mat-form-field

mat-form-field MatFormFieldControl

, , [hidden]:

<mat-form-field>
    <mat-chip-list [hidden]="_dataLoading">
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

Mosta: * ngIf mat-form-field:

<mat-form-field *ngIf="!_dataLoading">
    <mat-chip-list >
        <!-- other content here -->
    </mat-chip-list>
</mat-form-field>

+7

Alexei 22 . '18 15:26

, , , "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"

+6

ReturnTable 15 . '17 19:51

- <mat-checkbox>, ! <mat-form-field>.

+3

Mina 22 '19 13:04

, <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>

+2

user9001817 28 . '18 10:03

/ MatFormFieldControl

+1

rivanov 25 . '19 1:14

matInput , .

.

<mat-form-field>
   <input [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

 <mat-form-field>
   <input matInput [readOnly]="readOnly" name="amount" formControlName="amount" placeholder="Amount">
</mat-form-field>

+1

Franklin Pious 21 '19 14:05

, , SO, 3 , , , , , . , .

MatInputModule
MatFormFieldModule
ReactiveFormsModule

. , Angular Material, , , .

?

MatFormFieldModule , Angular Material. , MatInputModule "", , ..

- . Reactive Forms . Angular, Angular Docs. . , . , , , .

Angular Docs:

" " , , .

, , , . , Angular 2 Angular Material , . IMO, Angular Material, .

, Angular Material.

+1

anothercoder 09 . '19 6:22

/ , , : , - <input>.

, mat-form-field must contain a MatFormFieldControl mat-form-field must contain a MatFormFieldControl required /, <input/>. , (. ):

:

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" /required>

:

<input matInput type="text" name="linkUrl" [formControl]="listingForm.controls['linkUrl']" required/>

- , <input>, mat-form-field must contain a MatFormFieldControl mat-form-field must contain a MatFormFieldControl. , , .

+1

cjn 15 . '19 21:09

MatRadioModule MatFormField.

, . , , matInput MatInputModule. , , <mat-select>, <mat-chip-list> , .

+1

intotecho 03 . '19 5:18

"onChanges()" input, , , input, -, :

<input mat-menu-item 
      matInput type="text" 
      [formControl]="myFormControl"
      (ngModelChange)="onChanged()>

+1

java-addict301 Jul 29 '19 at 18:39

source share

The same error may occur if a mat with a mat is used as the field in the slide from the field. in my case I had

 <mat-form-field>
    <mat-slide-toggle [(ngModel)]="myvar">
       Some Text
     </mat-slide-toggle>
 </mat-form-field>

This can happen if you have several attributes in The <mat-form-field> simple solution was to move the slide switch to the root

+1

Kamana Kisinga Aug 29 '19 at 21:10

source share

In my case, I changed this:

<mat-form-field>
  <input type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

to that:

<mat-form-field>
  <input matInput type="email" placeholder="email" [(ngModel)]="data.email">
</mat-form-field>

Adding the matInput directive to the input tag was what fixed this error for me.

0

Gilmourguru Apr 23 '19 at 5:04

source share

You may have missed the import of MatInputModule

-1

Pranith baggan 10 sept. '19 at 8:12

source share

n.yakovenko · Accepted Answer · 2018-04-04T18:51:27+0000

, mat-form-field . , GitHub, .

- mat-form-field, MatFormFieldControl, , , .

Mat-form field must contain MatFormFieldControl

1

2

More articles: