Ошибки анализа шаблона: "md-form-field" не является известным элементом

Я использую Angular 4 и Angular Материал 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" является веб-компонентом, добавьте "CUSTOM_ELEMENTS_SCHEMA" в "@NgModule.schemas" этого компонента для подавления этого сообщения. ("[ERROR → ]

Не могли бы вы помочь мне, где мне не хватает?

Ниже приведен мой код 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 { }

Ответы

Ответ 1

UPDATE:

Так как 2.0.0-beta.12, префикс md был удален в пользу префикса mat. Подробнее см. CHANGELOG:

Все префиксы "md" удалены. См. уведомление об отказе в beta.11 примечания для получения дополнительной информации.

После обновления <md-form-field> следует изменить на <mat-form-field>. Кроме того, MdFormFieldModule и MdInputModule следует переименовать в MatFormFieldModule и MatInputModule:

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

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

Ниже приведена ссылка на Обновлена ​​демонстрация StackBlitz с помощью 2.0.0-beta.12.

ОРИГИНАЛ:

<md-form-field> был введен в 2.0.0-beta.10. См. Ниже в документации для изменения:

md-input-container переименован в md-form-field (пока еще обратная совместимость). Старый селектор будет удален в следующей версии.

Вот ссылка для завершения CHANGELOG.

Чтобы использовать селектор <md-form-field>, убедитесь, что у вас установлена ​​версия 2.0.0-beta.10. Кроме того, вам нужно импортировать MdFormFieldModule модуль в AppModule import:

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

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

Для всех, кто наткнулся на этот вопрос, вот ссылка на рабочая демонстрация на StackBlitz.

Ответ 2

Вы можете использовать md-input-container следующим образом:

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

Ответ 3

Если вам трудно импортировать файлы, вы можете импортировать только одну методологию.

Сначала импортируйте все необходимые компоненты в ваш .component.ts

И импортируйте конкретный модуль в свой модуль .module.ts

И затем добавьте его в импорт в @NgModule ({ imports : [ <Example>Module ] })

Пример, который вы хотите импортировать formcontrols только в вашем приложении 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 ] })