Angular material Error when mat-checkbox is imported

Question

I'm having some troubles with Angular Material, I've tried a lot of solutions but none of them work. This is what I'm trying to do :

I'm using Angular Material with Reactive Forms to make a register form, everything was fine until I added a mat-checkbox component. This is the error I get :

ERROR Error: mat-form-field must contain a MatFormFieldControl.

And this is my code :

HTML :

<mat-form-field>    <mat-checkbox formControlName="check">       Check me!    </mat-checkbox> </mat-form-field> 

COMPONENT :

this.registerForm = this.formBuilder.group({     name: ['', Validators.required ],     email: ['', Validators.required],     check: ['', Validators.required ] }); 

MODULE :

import { ReactiveFormsModule } from '@angular/forms'; import { RegisterFormComponent } from './register-form.component'; import { MatCheckboxModule } from '@angular/material'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  @NgModule({  imports: [     ReactiveFormsModule,     MatInputModule,     MatFormFieldModule,     MatCheckboxModule,     BrowserAnimationsModule  ],  declarations: [     RegisterFormComponent  ] })  export class RegisterFormModule { } 

I imported the modules so that Angular Material works fine, implemented the form control name and I still got the same error. I tried to include the mat-checkbox in my html without the mat-form-field container and it works perfectly with no errors, but I really need to use the form field because I want to add some mat-error components to display validation messages.

Does anyone know what I'm missing?

Answer 1

The error means that the form field cannot find a compatible material input inside of it.

Do not use <mat-checkbox> inside <mat-form-field>.

The following Angular Material components are designed to work inside a <mat-form-field>:

• <input matNativeControl> & <textarea matNativeControl> (version 7 & newer)

• <select matNativeControl> (version 7 & newer)

• <input matInput> & <textarea matInput> (version 5 & 6)

• <mat-select>

• <mat-chip-list>

Source: Official docs