角度材料输入控制

时间:2017-06-29 16:29:20

标签: angular input angular-material2

我正在尝试实现此输入控件

<div layout-gt-sm="row">
  <md-input-container class="md-block" flex-gt-sm>
    <label>First name</label>
    <input ng-model="user.firstName">
  </md-input-container>
</div>

我收到错误:

Unexpected directive 'MdInputContainer' imported by the module 'AppMaterialModule'. Please add a @NgModule annotation.

这就是AppMaterialModule的样子。

import { NgModule } from '@angular/core';
import {
    MdToolbarModule,
    MdIconModule,
    MdMenuModule,
    MdButtonModule,
    MdSelectModule,
    MdSnackBarModule,
    MdSnackBar, MdInputContainer, MdInputModule
} from '@angular/material';

@NgModule({
    imports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputContainer,
        MdInputModule
    ],
    exports: [
        MdToolbarModule,
        MdButtonModule,
        MdIconModule,
        MdMenuModule,
        MdSelectModule,
        MdSnackBarModule,
        MdInputContainer,
        MdInputModule

    ],
    providers: [
        MdSnackBar
    ]
})
export class AppMaterialModule {}

我做错了什么?我尝试使用md-input代替md-input-container。我也得到了错误。

1 个答案:

答案 0 :(得分:0)

确保在输入标记中使用mdInput,如

<md-input-container>
   <input mdInput type="text" [(ngModel)]="user.firstName" ...>
</md-input-container>

(如前所述,它是[(ngModel)],而不是ng-model