Angular Material输入框没有样式。

Question

我希望在我的项目中使用angular material。
我已经将@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 {
}

我不明白我做错了什么。我的表单看起来和行为都不像它应该的那样。

- Djent

Answer 1

你需要在模块导入中导入输入(input)和表单域(form-field)模块:

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

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

- FAISAL

Answer 2

这也可能是因为您没有将<input matInput>包装在<mat-form-field>中。

- Kevin Beal

---

谢谢，但为什么会发生这种情况？我打赌之前使用的 matInputs 没有包含在 mat-form-fields 中，但它们显示得很好。 - Gereon99

指令可以添加类，如果这些类是全局定义的，那么就没问题了，但如果样式被封装起来，那么就需要一个组件来应用这些样式。我忘记了在这种情况下它应该如何工作，但这可能可以解释它。 - Kevin Beal

Answer 3

这个问题可能已经很久了，但在谷歌搜索中仍然很重要。过去提供的答案是正确的，但现在情况已经发生了变化。

您可以在官方来源找到当前的API。我将强调应用样式到字段所必需的最关键的元素。

对app.module.ts的更改。确保提供所需的imports，您可以看到模块的名称已经改变了。它们不再是MdInputModule等。下面是我在app.module.ts中使用的一些模块的小例子，请根据您想要使用的组件进行调整：

...
imports: [
    ...
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    MatCheckboxModule,
    FormsModule,
...
]
...

将默认主题添加到您的 style.scss，将 indigo-pink 调整为您想要使用的任何样式：

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

如果你的 angular.json 已经有这个配置，就可能不需要对 style.scss 进行更改：

...
"styles": [
   "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "src/styles.scss"
],
...

确保使用正确的结构和正确的标签：

<mat-form-field>
  <mat-label>My Label</mat-label>
  <input matInput>
</mat-form-field>

此外，您可以通过在app.module.ts中添加一个提供者来应用默认的外观。

providers: [
    ...
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
     ...
]

注入令牌MAT_FORM_FIELD_DEFAULT_OPTIONS为您的表单字段提供了一些全局样式配置选项。您可以在文档中了解更多信息。

希望这能有所帮助。

- user2267367