角度材质输入控件答案

【问题标题】：Angular Material Input control角度材质输入控件
【发布时间】：2017-06-29 16:29:19
【问题描述】：

我正在尝试实现这个输入控件

<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。我也有错误。

【问题讨论】：

AFAIK，你应该只导入 modules。 MdInputContainer 是一个存在于 MdInputModule... 中的指令，因此一旦导入 MdInputModule，您就可以使用此指令或此模块声明的任何其他指令/组件。也是[(ngModel)]，而不是ng-model（不要忘记从@angular/forms 导入FormsModule）。
我已经进行了这些更改，但现在我收到错误消息：'md-input-container' 不是已知元素：1. 如果 'md-input-container' 是 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“md-input-container”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

标签： angular input angular-material2

【解决方案1】：

确保在输入标签中使用mdInput，如

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

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

【讨论】：