web-dev-qa-db-fra.com

Impossible de se lier à 'matDatepicker' car ce n'est pas une propriété connue de 'input' - Angular

Je viens de copier et coller angular du code matériel pour datePicker et entrée, mais je reçois cette erreur pour le datePicker.

app.module

import {MaterialModule} from '@angular/material';
@NgModule({
imports: [
...
MaterialModule
]

<md-input-container>
    <input mdInput placeholder="Rechercher" [(ngModel)]="filterHistorique">
</md-input-container>

<md-input-container>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
    <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

C'est l'erreur que j'ai dans mon navigateur:

Impossible de se lier à 'mdDatepicker' car ce n'est pas une propriété connue de 'input' Si 'md-datepicker' est un composant Angular angulaire, alors vérifiez qu'il fait partie de ce module. 2. Si "md-datepicker" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant pour supprimer ce message. ("[ERREUR ->]

L'erreur est pour le sélecteur de date, quand je l'ai enlevé, les erreurs disparaissent

angularangular-materialangular-material2
28
edkeveked

En utilisant mat-datepicker, vous devez également importer MatDatepickerModule. Il est également recommandé d'importer MatNativeDateModule. voir docs ici.

import { MaterialModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
@NgModule({
  imports: [
    ...
    MaterialModule,            // <----- this module will be deprecated in the future version.
    MatDatepickerModule,        // <----- import(must)
    MatNativeDateModule,        // <----- import for date formating(optional)
    MatMomentDateModule         // <----- import for date formating adapted to more locales(optional)
  ]

Pour le module optionnel de formatage de date, voir module pour DateAdapter de l'équipe de matériaux.

Mention : évitez d’utiliser MaterialModule car il sera obsolète à l’avenir.

35
Pengyy

vous devez importer FormsModule et ReactiveFormsModule si vous avez utilisé NgModule et formgroup. donc votre app.module devrait être comme ça

import {MaterialModule} from '@angular/material';
@NgModule({
  imports: [
    MdDatepickerModule,        
    MdNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ]

Remarque: MaterialModule supprimé. veuillez utiliser un module séparé à la place. comme MdDatepickerModule voir ici https://github.com/angular/material2/blob/master/CHANGELOG.md#200-beta11- carapace-parapet-2017-09-21

4
Shailesh Ladumor

Pour utiliser MatDatePicker dans une application, ajoutez la ligne suivante dans votre fichier app.module.ts:

  1. importer MatDatepickerModule, MatNativeDateModule dans votre app.module.ts.

    Par exemple:

    import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

  2. Ajouter MatDatepickerModule, MatNativeDateModule uner @NgModule dans les importations et les exportations:

**

@NgModule ({
            imports: [
                MatDatepickerModule,
        MatNativeDateModule 
            ],
            exports: [
                MatDatepickerModule, 
                MatNativeDateModule 
            ]
        })

**

1
vaishali chaudhari