Material UI Datepicker not working on angular

Question

I have integrated the material UI in my angular project using this command ng add @angular/material and I have imported the all necessary components on app.module.ts file but I am facing the below error

Here is my HTML code

<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Please help me to fix this issue

did you check this https://stackoverflow.com/questions/46705101/mat-form-field-must-contain-a-matformfieldcontrol — Maksat Rahmanov, Mar 17 '22 at 15:17

score 1 · Accepted Answer · answered Mar 17 '22 at 15:18

Your html code is fine. Make sure right imports have been made.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatFormFieldModule,
    ReactiveFormsModule,
  ],
  declarations: [
    AppComponent,
    HelloComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

score 0 · Answer 2 · answered Mar 17 '22 at 15:20

0

Probably, you forgot to import MatInputModule.

import { MatFormFieldModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatFormFieldModule,
        MatInputModule
    ]
})
export class AppModule { }

answered Mar 17 '22 at 15:20

Pterrat

1,682
11
18

No, actually I have imported the both on app.module.ts – Ashok K Mar 17 '22 at 15:23

Material UI Datepicker not working on angular

2 Answers2