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?

Try adding a name attribute, name="check" along with formControlName. — Prachi
– Prachi, Commented May 14, 2018 at 17:41

kvetis · Accepted Answer · 2020-09-09 12:18:44Z

69

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

edited Sep 9, 2020 at 12:18

answered May 14, 2018 at 15:56

kvetis

7,4302 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JustAMartin Over a year ago

That's a very weird decision from AngularMD team - now how do I vertically align two form fields where one has mat-form-field with input inside and the other one has a checkbox but cannot use mat-form-field with its vertical layout styles... Cannot see any logic why mat-checkbox is not considered a valid form-field.

Wahéb Over a year ago

Please check this documentation page material.angular.io/components/checkbox/examples

MrAlbino · Accepted Answer · 2023-04-25 06:48:09Z

0

When I look at the checkbox documentation, I see that the use of checkbox is supported in the forms, both reactive and template driven. I was able to create a checkbox inside the form as follows.

<mat-form-field class="full-width">
    <mat-checkbox [(ngModel)]="selectedCourse.favorite" name="favorite">
        Favorite
        <input matInput>
    </mat-checkbox>
</mat-form-field>

edited Apr 25, 2023 at 6:48

answered Apr 24, 2023 at 21:42

MrAlbino

4374 silver badges14 bronze badges

1 Comment

Mojtaba Over a year ago

It looks like a hack; wondering how does UI look. This may break other things and it is not the way that AngularMD recommended. I'd avoid doing that.

Collectives™ on Stack Overflow

Angular material Error when mat-checkbox is imported

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related