角材料输入字段未设置样式

Question

我想在项目中使用角度材质。
我已经添加@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';到我的style.css文件中，并且可以正常工作-表格，卡片，工具栏的样式正确，但表单的样式不正确。
我用代码例子在这里，仅仅通过复制和粘贴，其结果如下所示：

我究竟做错了什么？这是我的模块（不是主模块）：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ImageListComponent} from './image-list.component';
import {ImageListService} from './image-list.service';
import {FileSizePipe} from '../shared/file-size.pipe';
import {
  MdAutocompleteModule,
  MdButtonModule,
  MdCardModule,
  MdChipsModule,
  MdTableModule
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';
import {EnvironmentVariableComponent, ImageRunComponent} from './image-run.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { InputTestComponent } from './input-test.component';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdCardModule,
    MdChipsModule,
    MdTableModule,
    CdkTableModule,
    MdAutocompleteModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  declarations: [ImageListComponent, FileSizePipe, ImageRunComponent, EnvironmentVariableComponent, InputTestComponent],
  providers: [ImageListService],
  exports: [ImageListComponent, ImageRunComponent, InputTestComponent]
})
export class ImageModule {
}

这是我的主要模块：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {ImageModule} from './image/image.module';
import {MdToolbarModule} from "@angular/material";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageModule,
    BrowserAnimationsModule,
    MdToolbarModule,
    FormsModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我不明白我在做什么错。我的表单没有按照预期的方式运行。

Answer 1

这也可能发生，因为您没有<input matInput>用<mat-form-field>.

Answer 2

您需要在模块导入中导入输入模块和表单字段模块：

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

// ....
imports: [
    MdInputModule,
    MdFormFieldModule,
],