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?
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