wake-up-neo.com

Fehler bei der Musteranalyse: 'md-form-field' ist kein bekanntes Element

Ich verwende Angular 4 und Angular Material 2. Für den folgenden Code:

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

Ich bekomme eine Fehlermeldung:

Fehler bei der Musteranalyse: 'md-form-field' ist kein bekanntes Element : 1. Wenn 'md-form-field' eine Winkelkomponente ist, vergewissern Sie sich, dass es Teil dieses Moduls ist . 2. Wenn 'md-form-field' eine Webkomponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' zu '@ NgModule.schemas' dieser Komponente hinzu. um diese Nachricht zu unterdrücken. ("[FEHLER ->]

Könnten Sie mir bitte helfen, wo ich vermisse?

Folgendes ist meinapp.module.tscode, in den ich Materialmodule importiert habe:

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

UPDATE:

Seit 2.0.0-beta.12 wurde das Präfix md zugunsten von mat entfernt. Sehen Sie dieses CHANGELOG für Details: 

Alle "md" -Präfixe wurden entfernt. Siehe deprecation notice in der Beta.11 Hinweise für weitere Informationen.

Nach dem Update sollte <md-form-field> in <mat-form-field> geändert werden. MdFormFieldModule und MdInputModule sollten in MatFormFieldModule und MatInputModule geändert werden:

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

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

Hier ist ein Link zu Updated StackBlitz demo mit 2.0.0-beta.12.


ORIGINAL: 

<md-form-field> wurde in 2.0.0-beta.10 eingeführt. Siehe unten in der Changelog-Dokumentation: 

md-input-container wurde umbenannt in md-form-field (solange er noch __. abwärts kompatibel ist) Der alte Selector wird in einer späteren Version entfernt. 

Hier ist ein Link zum Vervollständigen von CHANGELOG

Um den <md-form-field> - Selektor zu verwenden, stellen Sie sicher, dass die Version 2.0.0-beta.10 des Materials installiert ist. Außerdem müssen Sie das MdFormFieldModule Modul in Ihre AppModule Importe importieren: 

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

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

Für alle, die auf diese Frage stoßen, finden Sie hier einen Link zu Arbeitsdemo auf StackBlitz. 

51
Faisal

Wenn Sie beim Importieren von Dateien Schwierigkeiten haben, können Sie nur eine Methode zum Importieren verwenden.

Importieren Sie zunächst alle erforderlichen Komponenten in Ihre .component.ts

Und importieren Sie das spezifische Modul in Ihrem Modul .module.ts

Und dann in @NgModule ({ imports : [ <Example>Module ] }) importieren

Beispiel: Sie möchten Formularsteuerungen nur in Ihrer Winkelanwendung importieren

1). app.component.ts

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

2). app.module.ts

import { FormsModule } from '@angular/forms'

unten in app.module.ts in

@NgModule ({ imports : [ FormsModule ] }) 

1
user3051167

Sie können md-input-container folgendermaßen verwenden:

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

0
Elvin Garibzade