2 votes

Can't bind to 'matDatePicker' since it isn't a known property of 'input'

I am having trouble including the datepicker from angular material in my application.

In my app.module.ts I import it like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatCheckboxModule, MatDatepickerModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    FormsModule,
    AppRoutingModule,
    RoutingAppointment, 
    MatFormFieldModule,
    MatCheckboxModule,
    MatDatepickerModule
  ],
  exports:[
    MatDatepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And then in my component in the html I call it as follows (copy pasted from the angular material doc):

<mat-form-field>
      <input matInput [matDatePicker]="picker" placeholder="DD/MM/YYYY">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

However, I am getting the error:

Can't bind to 'matDatePicker' since it isn't a known property of 'input'

Does anyone know what I am doing wrong?

1voto

Findelias Points 473

Solved. The attribute name was misspelled in the html.

Instead of [matDatepicker] which is the correct form, had [matDatePicker] with a capital P, which is incorrect.

A nonsense like a grand piano.

0voto

Pablo Lozano Points 23403

It sounds like you have not imported the corresponding module:

You have to choose between MatMomentDateModule (which will depend on moment.js ) y MatNativeDateModule (which will use the class Date native Javascript).

On the other hand, make sure that you also have imported FormsModule and (depending on what type of forms you create) ReactiveFormsModule .

For more information here

0 votes

I have already tried to add MatNativeDateModule to my app.module and add it to the imports array but there is no way to stop giving the error.

0 votes

What about FormsModule?

0 votes

FormsModule is also imported

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X