Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

md-form-field must contain a MdFormFieldControl

I am trying to insert an input field in my component using angular-material2. This is my HTML:

<md-form-field>
    <input type="text">
</md-form-field>

In the console, I get this error but I don't understand why I get the error:

md-form-field must contain a MdFormFieldControl. Did you forget to add mdInput to the native input or textarea element?

like image 535
annie Avatar asked Sep 05 '17 14:09

annie


People also ask

How do I fix mat form field must contain a MatFormFieldControl?

To fix the error, add MatInputModule and MatFormFieldModule inside a necessary module or app.

Should create mat form field must contain a MatFormFieldControl?

Error: mat-form-field must contain a MatFormFieldControlThis error occurs when you have not added a form field control to your form field. If your form field contains a native <input> or <textarea> element, make sure you've added the matInput directive to it and have imported MatInputModule .

What is MatFormFieldControl?

MatFormFieldControl. An interface which allows a control to work inside of a MatFormField .

How can I increase my mat form field size?

The key to adjusting the field size is actually just adjusting the font-size in the surrounding container. Once you do that, everything else will scale with it. e.g.

Which field must contain a matformfieldcontrol?

Error: mat-form-field must contain a MatFormFieldControl. angular at-form-field must contain a MatFormFieldControl.

What components can act as a form field control?

Other components that can act as a form field control include <mat-select>, <mat-chip-list>, and any custom form field controls you've created. Show activity on this post.

How to add a custom form field component to a form?

By now the only solution for you is either place your content directly into mat-form-field component or implement a MatFormFieldControl class thus creating a custom form field component. Show activity on this post. This can also happen if you have a proper input within a mat-form-field, but it has a ngIf on it. E.g.:

Why is my form field not working?

This error occurs when you have not added a form field control to your form field. If your form field contains a native <input> or <textarea> element, make sure you've added the matInput directive to it and have imported MatInputModule.


1 Answers

First you need to import MdFormFieldModule,MdInputModule modules in your app.module. Then you need to add an mdInput directive in your <input>.

<md-form-field>
  <input type="text" mdInput>
</md-form-field>

Link to working demo.

like image 178
Faisal Avatar answered Oct 13 '22 03:10

Faisal