md-form-field must contain a MdFormFieldControl

Question

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?

score 10 · Accepted Answer · edited Sep 09 '17 at 20:27

10

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>

edited Sep 09 '17 at 20:27

Community

answered Sep 05 '17 at 14:53

FAISAL

Which version of material? Same error? Thats not possible - have you seen the demo? – FAISAL Sep 05 '17 at 15:02
1

Fixed it, i had forgotten to import some modules. – annie Sep 05 '17 at 15:06
...what modules? – Matthew Meppiel Sep 08 '17 at 15:34
`MdFormFieldModule`,`MdInputModule` ... @MatthewMeppiel please upvote if this answer helped you :) please refer to this answer as well for more details: https://stackoverflow.com/a/45954825/1791913 – FAISAL Sep 08 '17 at 15:37
1

I was already importing both of those modules and still received the error. I ended up viewing the link that you provided and just importing everything and it works. Was just curious as to which specific module needed to be added. – Matthew Meppiel Sep 08 '17 at 15:40
@Faisal, I imported MdFormFieldModule, MdInputModule and the code in the html is just like what you wrote. I don't get any errors, but the input looks as a regular html input, no floating label etc. do you have any idea why? I am using material beta.10 – Batsheva Oct 15 '17 at 09:40
You need to add theme in your app. – FAISAL Oct 15 '17 at 09:52
What do you mean? as I mentioned I imported them in my app module – Batsheva Oct 15 '17 at 09:59

1 Answers1