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

Question

Je suis Angulaire à l'aide de 4 et de la quantité de Matériel 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>

J'obtiens une erreur:

Modèle erreurs d'analyse: 'md-champ de formulaire" n'est pas un élément connu: 1. Si 'md-forme-champ Angulaire composant, vérifiez qu'il est partie de ce module. 2. Si 'md-forme-champ" est un Composant Web puis "CUSTOM_ELEMENTS_SCHEMA' à la '@NgModule.les schémas de la composante pour supprimer ce message. (" [ERREUR ->]

Pourriez-vous s'il vous plaît aidez-moi où je suis absent?

Voici mon app.module.ts code où j'ai importé le matériel des modules:

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 { }

Answer 1

Mise à JOUR:

Depuis 2.0.0-beta.12, md préfixe a été retiré en faveur d' mat préfixe. Voir ce CHANGELOG pour plus de détails:

Tous les "md" préfixes ont été supprimés. Voir la dépréciation de l'avis dans le la bêta.11 notes pour plus d'informations.

Après la mise à jour, <md-form-field> devrait être changé en <mat-form-field>. Aussi, MdFormFieldModule et MdInputModule devrait être changé en MatFormFieldModule et MatInputModule:

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

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

Voici un lien de mise à Jour StackBlitz démo 2.0.0-beta.12.

---

ORIGINE:

<md-form-field> a été introduit dans la version 2.0.0-bêta.10. Voir ci-dessous dans le changelog de la documentation:

md-entrée-conteneur renommé md-champ de formulaire (tout en restant rétro-compatible). L'ancien sélecteur sera supprimée dans une version ultérieure.

Voici un lien pour compléter le CHANGELOG.

Pour utiliser <md-form-field> sélecteur, assurez-vous que vous avez la version 2.0.0-bêta.10 de matériel installé. En outre, vous avez besoin d'importer MdFormFieldModule module en vous - AppModule importations:

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

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

Pour tous ceux qui bute sur cette question, voici un lien pour le travail de démonstration sur StackBlitz.

Answer 2

Si vous trouvez des difficultés à importer des fichiers, puis seulement vous pouvez disposer d'une méthodologie pour l'importation.

D'abord importer des composants requis dans votre .composante.ts

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

Et puis l'ajouter dans les importations en @NgModule ({ imports : [ <Example>Module ] })

Exemple vous souhaitez importer formcontrols juste à vous angulaire de l'application

1). app.composante.ts

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

2). app.le module.ts

import { FormsModule } from '@angular/forms'

ci-dessous dans l'app.le module.ts en

@NgModule ({ imports : [ FormsModule ] })

Answer 3

Vous pouvez utiliser md-input-container comme ceci:

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