首页 文章

模板解析错误：'md-form-field'不是已知元素

提问于
浏览 次
34

我正在使用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 { }
angular angular-material angular-material2

3 回答

  • 50

    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,
    ....
  ]

    这是使用 2.0.0-beta.12 的Updated StackBlitz demo的链接 .

    ORIGINAL:

    <md-form-field> 在2.0.0-beta.10中引入 . 请参阅以下changelog文档：

    md-input-container重命名为md-form-field（同时仍向后兼容） . 旧选择器将在后续版本中删除 .

    这是一个完成CHANGELOG的链接 .

    要使用 <md-form-field> 选择器，请确保安装了2.0.0-beta.10版本的材料 . 此外，您需要在 AppModule 导入中导入 MdFormFieldModule 模块：

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

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

    对于偶然发现这个问题的人来说，这里是StackBlitz上working demo的链接 .

    回复于
  • 1

    如果您发现导入文件有困难，那么只需要导入一种方法即可 .

    首先导入.component.ts中的所有必需组件

    并导入模块.module.ts中的特定模块

    然后在 @NgModule ({ imports : [ <Example>Module ] }) 中将其添加到导入中

    您想要在角度应用程序中导入formcontrols的示例

    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 ] })

    回复于
  • 0

    您可以像这样使用md-input-container：

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

相关问题