Question

我试图使用Angular Material设计一个表单，但是当我加载所有内容时，输入样式似乎不起作用。

这是我在HTML上的代码

<!-- Title Tool Bar with Shadow Lv6 -->
<mat-toolbar class="app-header mat-elevation-z6" color="primary">
    <!-- Tool Bar Row 1 -->
    <mat-toolbar-row>
        <!-- Side Bar Button Opener -->
        <button mat-icon-button class="app-header-menu-button">
            <mat-icon>menu</mat-icon>
        </button>
        <!-- Title -->
        <span class="app-header-title">Théa&nbsp;&nbsp;</span>
        <!-- Subtitle -->
        <span class="app-header-subtitle">Cuestionario Stars</span>
        <!-- Spacer -->
        <span class="app-header-spacer"></span>
        <!-- Log In Button -->
        <button mat-icon-button class="app-header-login-button">
            <mat-icon>account_circle</mat-icon>
        </button>
    </mat-toolbar-row>
</mat-toolbar>

<!-- Main Content -->
<div class="app-content">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

这是我在TS模块上的代码

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

import {AppComponent} from './app.component';
import {BrowserAnimationsModule, NoopAnimationsModule} from "@angular/platform-browser/animations";
import {MatToolbarModule} from "@angular/material/toolbar";
import {MatStepperModule} from '@angular/material/stepper';
import {MatButtonModule} from '@angular/material/button';
import {MatTabsModule} from '@angular/material/tabs';
import {MatIconModule} from "@angular/material/icon";
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, MatToolbarModule, MatStepperModule, MatButtonModule, MatTabsModule, MatIconModule, MatFormFieldModule, MatSelectModule],
    exports: [BrowserAnimationsModule, NoopAnimationsModule, MatToolbarModule, MatStepperModule, MatButtonModule, MatTabsModule, MatIconModule, MatFormFieldModule, MatSelectModule],
    declarations: [
        AppComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})

这些是我的包裹。

{
  "name": "thea-stars-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "material-design-icons": "^3.0.1",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

当我检查Safari（我的默认浏览器）上的代码时，我收到此错误代码。

Error: mat-form-field must contain a MatFormFieldControl.

我一直在搜索此错误，但我找不到与此问题相关的内容。

如果有人知道发生了什么，我将不胜感激。不管怎样，谢谢！

Answer 1

您需要将MatInputModule添加到app.module.ts

import {MatInputModule} from '@angular/material';
@NgModule({
  imports: [
  ...
    MatInputModule
  ...
]

希望有所帮助！

Answer 2

您必须导入一些额外的模块。 MatInputModule，您还可能需要添加FormsModule和ReactiveFormsModule。但最后一个可能没有必要。

您还需要在styles.css / styles.scss中导入Angular Material主题，如下所示：@import "~@angular/material/prebuilt-themes/indigo-pink.css";

避免错误

错误：mat-form-field必须包含MatFormFieldControl。

尝试在mat-form-field中添加一个控件：

   <form> <!-- added outer form tag -->
    <mat-form-field [formControl]="myFormControl">
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
   </form>

并在组件中定义formControl：

// for this, you need the FormsModule and the ReactiveFormsModule
myFormControl = new FormControl(''‚[]);

编辑：您不应同时导入NoopAnimationsModule和BrowserAnimationsModule。使用其中之一。如果重要的话我不知道，但是将@ angular / material和@ angular / cdk设置为^ 6.0.0，以便它匹配所有其他@angular依赖项。

Answer 3

您必须添加app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Pipe, PipeTransform } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';


// Angular Material
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {A11yModule} from '@angular/cdk/a11y';
import {BidiModule} from '@angular/cdk/bidi';
import {ObserversModule} from '@angular/cdk/observers';
import {OverlayModule} from '@angular/cdk/overlay';
import {PlatformModule} from '@angular/cdk/platform';
import {PortalModule} from '@angular/cdk/portal';
import {ScrollDispatchModule} from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table';
import { MatButtonModule, MatCheckboxModule, MatToolbarModule, MatIconModule, MatTableModule, MatFormFieldModule } from '@angular/material';
import { MatSidenavModule, MatTabsModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,
         MatRadioModule, MatGridListModule, MatCardModule, MatMenuModule, MatPaginatorModule,
         MatSortModule, MatAutocompleteModule, MatButtonToggleModule, MatChipsModule, MatDialogModule,
         MatExpansionModule, MatListModule, MatProgressBarModule,  MatProgressSpinnerModule, MatRippleModule,
         MatSelectModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatStepperModule, MatTooltipModule
        } from '@angular/material';

// components
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { SidenavComponent, GroupByPipe } from './components/sidenav/sidenav.component';



 @NgModule({
  exports: [
    // CDK
    A11yModule,
    BidiModule,
    ObserversModule,
    OverlayModule,
    PlatformModule,
    PortalModule,
    ScrollDispatchModule,
    CdkStepperModule,
    CdkTableModule,

    // Material
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatSortModule,
    MatFormFieldModule,
    LayoutModule,
    NgMatSearchBarModule
    // FlexLayoutModule
]
})
export class MaterialModule {}


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidenavComponent
    ],
  imports: [
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  entryComponents: [AddArtikelComponent],

  providers: [
  ],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

// platformBrowserDynamic().bootstrapModule(AppModule);

Answer 4

还请检查是否配置了主题：

styles.scss：

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

styles.css：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

参考： https://material.angular.io/guide/theming

Angular 2 Material can't load style

Angular Material 6不显示表单样式

4 个答案: