2017-06-29 73 views
0

我想实现这个输入控制角材质输入控制

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

+3

据我所知,你应该只导入** **模块。 'MdInputContainer'是一个指令,它存在于'MdInputModule'中......所以一旦你导入了'MdInputModule',你就可以使用这个指令或者这个模块声明的其他指令/组件。它也是'[(ngModel)]',而不是'ng-model'(不要忘记从@ angular/forms'中导入'FormsModule')。 – developer033

+0

我做了这些改变,但现在我得到的错误:'md-input-container'不是已知的元素: 1.如果'md-input-container'是一个Angular组件,那么验证它是否是这个模块。 2.如果'md-input-container'是一个Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'中以禁止此消息。 – Jay

回答

0

确保你在输入标签使用mdInput的,如

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

(正如已经指出它是[(ngModel)],不ng-model