mat-form-field must contain a MatFormFieldControl

Question

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design\'s Components like this:

field:

Answer 1

Unfortunately I can't just comment on some already good answers as I don't have the SO points yet, however, there are 3 key modules that you'll need to make sure you are importing into your component's parent module, aside from what you have to import into your component directly. I wanted to briefly share them and highlight what they do.

1. MatInputModule
2. MatFormFieldModule
3. ReactiveFormsModule

The first two are for Angular Material. A lot of people new to Angular Material will instinctively come across one of these and not realize that building a form requires both.

So what's the difference between them?

MatFormFieldModule encompasses all the different types of form fields that Angular Material has available. This is more of a high level module for form fields in general, whereas the MatInputModule is specifically for 'input' field types, as opposed to select boxes, radio buttons, etc.

The third item on the above list is Angular's Reactive Forms Module. The Reactive Forms Module is responsible for a ton of under-the-hood Angular love. If you are going to work with Angular, I highly recommend that you spend some time reading Angular Docs. They have all of your answers. Building applications rarely DOESN'T involve forms, and more often than not, your application will involve reactive forms. For that reason, please take the time to read these two pages.

Angular Docs: Reactive Forms

Angular Docs: Reactive Forms Module

The first doc 'Reactive Forms' will be your most powerful weapon as you get started, and the second doc will be your most power weapon as you get on to more advanced applications of Angular Reactive Forms.

Remember, these need to be imported directly into your component's module, not the component you are using them in. If I remember correctly, in Angular 2, we imported the entire set of Angular Material modules in our main app module, and then imported what we needed in each of our components directly. The current method is much more efficient IMO because we are guaranteed to import the entire set of Angular Material modules if we only use a few of them.

I hope this provides a bit more insight into building forms with Angular Material.