Angular Material 6不显示表单样式 [英] Angular Material 6 doesn't shows form styles

问题描述

我正在尝试使用Angular Material设计表单，但是当我加载所有内容时，输入样式似乎无法正常工作.

I'm trying to design a form with Angular Material, but when I load everything the input styles doesn't seems to work.

这是我在HTML上的代码

This is my code on the 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模块上的代码

This is my code on the TS Module

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(默认浏览器)上检查代码时，出现此错误代码.

When I inspect the code on Safari (my default browser) I get this error code.

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

我一直在寻找此错误，但没有找到与该问题相关的内容.

I have been searching for this error, but I don't find something relevant to the problem.

如果有人知道发生了什么，我将不胜感激. 还是谢谢你！

If someone knows what is happening I will be grateful. Thanks anyways!

推荐答案

您必须在app.module.ts中添加

you have to add in 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);

这篇关于Angular Material 6不显示表单样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！