web-dev-qa-db-ja.com

テンプレート解析エラー： 'md-form-field'は既知の要素ではありません

Angular 4およびAngular Material 2を使用しています。次のコードの場合：

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

エラーが発生しています：

テンプレート解析エラー：'md-form-field'は既知の要素ではありません：1. 'md-form-field'がAngularコンポーネントである場合、それが検証されますこのモジュールの一部。 2.「md-form-field」がWebコンポーネントの場合、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schemas」に追加して、このメッセージを抑制します。 （ "[エラー->]

私が行方不明になっている場所を教えてください。

以下は、材料モジュールをインポートしたapp.module.tsコードです。

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

PDATE：

2.0.0-beta.12であるため、mdプレフィックスの代わりにmatプレフィックスが削除されました。詳細は CHANGELOG をご覧ください：

すべての「md」プレフィックスが削除されました。詳細については、beta.11ノートの deprecation notice を参照してください。

更新後、<md-form-field>を<mat-form-field>に変更する必要があります。また、MdFormFieldModuleおよびMdInputModuleはMatFormFieldModuleおよびMatInputModuleに変更する必要があります。

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

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

pdated StackBlitz デモを使用する2.0.0-beta.12へのリンクです。

オリジナル：

<md-form-field>は 2.0.0-beta.1 で導入されました。変更ログのドキュメントから以下を参照してください。

md-input-containerに変更されましたmd-form-field（まだ下位互換性があります）。古いセレクタは、後続のリリースで削除されます。

完全なリンクがあります CHANGELOG 。

<md-form-field>セレクターを使用するには、バージョン2.0.0-beta.10のマテリアルがインストールされていることを確認してください。さらに、インポートする必要がありますMdFormFieldModuleあなたのモジュールAppModule imports：

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

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

この質問に出くわした人のために、StackBlitzの working demo へのリンクがあります。

56
Faisal

ファイルのインポートに問題がある場合、インポートする方法は1つだけです。

まず、必要なコンポーネントを.component.tsにインポートします

そして、モジュール.module.tsに特定のモジュールをインポートします

そして、それを@NgModule ({ imports : [ <Example>Module ] })のインポートに追加します

angularアプリケーションにフォームコントロールをインポートする例

1）。 app.component.ts

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

2）。 app.module.ts

import { FormsModule } from '@angular/forms'

以下のapp.module.tsで

@NgModule ({ imports : [ FormsModule ] })

1
user3051167

次のようにmd-input-containerを使用できます。

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