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 content projection into mat-form-field is not supported yet. Please track the following github issue to get the latest news about it.

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.

Answer 2

use providers in component.ts file

@Component({
 selector: 'your-selector',
 templateUrl: 'template.html',
 styleUrls: ['style.css'],
 providers: [
 { provide: MatFormFieldControl, useExisting: FormFieldCustomControlExample }   
]
})

Answer 3

I had same issue

issue is simple

only you must import two modules to your project

MatFormFieldModule MatInputModule

Answer 4

I had this issue too, and I have <mat-select> element in my template, when I import the MatSelectModule into Module, it works, it doesn't make science, but stil hope it can help you.

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>

Answer 5

You have missed matInput directive in your input tag.

Answer 6

I had the module imported and directive set and after executing 'ng add @angular/material' again it started working. Maybe it would be enough just to restart app with 'ng serve'