web-dev-qa-db-fra.com

Erreurs d'analyse de modèle: 'md-form-field' n'est pas un élément connu

J'utilise Angular 4 et Angular Material 2. Pour le code suivant:

<form>
  <md-form-field>
    <input mdInput [ngModel]="userName" placeholder="User" [formControl]="usernameFormControl">
    <md-error *ngIf="usernameFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <input mdInput [ngModel]="password" placeholder="Password" [formControl]="passwordFormControl">
    <md-error *ngIf="passwordFormControl.hasError('required')">
      This is <strong>required</strong>
    </md-error>
    <button md-raised-button color="primary" [disabled]="!usernameFormControl.valid || !passwordFormControl.valid">Login</button>
  </md-form-field>
</form>

Je reçois une erreur:

Erreurs d'analyse de modèle: 'md-form-field' n'est pas un élément connu : 1. Si 'md-form-field' est un composant angulaire, vérifiez qu'il fait partie de ce module . 2. Si "md-form-field" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant supprimer ce message. ("[ERREUR ->]

Pourriez-vous s'il vous plaît m'aider où je manque?

Voici monapp.module.tscode où j'ai importé des modules de matériau:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './login.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdCoreModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdSortModule,
  MdTableModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule
} from '@angular/material';

import {CdkTableModule} from '@angular/cdk';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    MdAutocompleteModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdChipsModule,
    MdCoreModule,
    MdDatepickerModule,
    MdDialogModule,
    MdExpansionModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdNativeDateModule,
    MdPaginatorModule,
    MdProgressBarModule,
    MdProgressSpinnerModule,
    MdRadioModule,
    MdRippleModule,
    MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdSnackBarModule,
    MdSortModule,
    MdTableModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    CdkTableModule
  ],
  declarations: [
    AppComponent,
    LoginComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
angularangular-materialangular-material2
34
Suvonkar

METTRE À JOUR:

Depuis 2.0.0-beta.12, le préfixe md a été supprimé au profit du préfixe mat. Voir ceci CHANGELOG pour plus de détails: 

Tous les préfixes "md" ont été supprimés. Voir la notification deprecation dans le fichier notes beta.11 pour plus d'informations.

Après la mise à jour, <md-form-field> doit être remplacé par <mat-form-field>. De plus, MdFormFieldModule et MdInputModule doivent être remplacés par MatFormFieldModule et MatInputModule:

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

@NgModule({
  imports: [
    ....
    MatFormFieldModule,
    MatInputModule,
    ....
  ]

Voici un lien vers StackBlitz demo mis à jour en utilisant 2.0.0-beta.12.

ORIGINAL: 

<md-form-field> a été introduit dans 2.0.0-beta.10 . Voir ci-dessous la documentation de changelog: 

md-input-container a été renommé en md-form-field (tout en restant compatible avec ). L'ancien sélecteur sera supprimé dans une version ultérieure. 

Voici un lien pour compléter CHANGELOG . 

Pour utiliser le sélecteur <md-form-field>, assurez-vous que la version 2.0.0-beta.10 du matériel est installée. De plus, vous devez importer le module MdFormFieldModule dans votre AppModule importations: 

import { MdFormFieldModule } from '@angular/material';
import { MdInputModule } from '@angular/material';

@NgModule({
  imports: [
    ....
    MdFormFieldModule,
    MdInputModule,
    ....
  ]

Pour ceux qui trébuchent sur cette question, voici un lien vers démo de travail sur StackBlitz. 

51
Faisal

Si vous rencontrez des difficultés pour importer des fichiers, vous pouvez disposer d’une seule méthode d’importation.

Commencez par importer les composants requis dans votre fichier .component.ts.

Et importez le module spécifique dans votre module .module.ts

Et ajoutez-le ensuite dans les importations dans @NgModule ({ imports : [ <Example>Module ] })

Exemple où vous souhaitez importer des contrôles de formulaire uniquement dans votre application angulaire

1). app.component.ts

`import { FormGroup, FormControl } from '@angular/forms'`

2) app.module.ts

import { FormsModule } from '@angular/forms'

ci-dessous dans app.module.ts dans

@NgModule ({ imports : [ FormsModule ] }) 

1
user3051167

Vous pouvez utiliser md-input-container comme ceci:

<md-input-container>
 <input mdInput name="name" [(ngModel)]="yourModel" class="filter-input-field"/>
</md-input-container>

0
Elvin Garibzade