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

问题描述

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

这是我在 HTML 上的代码

<mat-toolbar class="app-header mat-elevation-z6" color="primary"><!-- 工具栏第 1 行 --><mat-toolbar-row><!-- 侧边栏按钮开启器--><button mat-icon-button class="app-header-menu-button"><mat-icon>菜单</mat-icon><!-- 标题--><span class="app-header-title">Théa&nbsp;&nbsp;</span><!-- 副标题--><span class="app-header-subtitle">Cuestionario Stars</span><!-- 垫片--><span class="app-header-spacer"></span><!-- 登录按钮--><button mat-icon-button class="app-header-login-button"><mat-icon>account_circle</mat-icon></mat-toolbar-row></mat-toolbar><!-- 主要内容--><div class="app-content"><mat-form-field><input matInput placeholder="输入"></mat-form-field><mat-form-field><textarea matInput placeholder="Textarea"></textarea></mat-form-field><mat-form-field><mat-select placeholder="选择"><mat-option value="option">Option</mat-option></mat-select></mat-form-field>

这是我在 TS 模块上的代码

从'@angular/platform-b​​rowser'导入{BrowserModule}；从@angular/core"导入 {NgModule}；从 './app.component' 导入 {AppComponent}；从@angular/platform-b​​rowser/animations"导入 {BrowserAnimationsModule, NoopAnimationsModule}；从@angular/material/toolbar"导入 {MatToolbarModule}；从@angular/material/stepper"导入 {MatStepperModule}；从@angular/material/button"导入 {MatButtonModule}；从@angular/material/tabs"导入 {MatTabsModule}；从@angular/material/icon"导入{MatIconModule}；从@angular/material/form-field"导入 {MatFormFieldModule}；从@angular/material/select"导入 {MatSelectModule}；@NgModule({进口:[BrowserModule，BrowserAnimationsModule，NoopAnimationsModule，MatToolbarModule，MatStepperModule，MatButtonModule，MatTabsModule，MatIconModule，MatFormFieldModule，MatSelectModule]，导出:[BrowserAnimationsModule、NoopAnimationsModule、MatToolbarModule、MatStepperModule、MatButtonModule、MatTabsModule、MatIconModule、MatFormFieldModule、MatSelectModule]、声明: [应用组件],提供者:[]，引导程序:[AppComponent]})

那些是我的包裹.

<代码>{"name": "thea-stars-test",版本":0.0.0"，脚本":{"ng": "ng","start": "ng serve","build": "ng build","test": "ng 测试","lint": "ng lint","e2e": "ng e2e"},私人":真的，依赖关系":{"@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-b​​rowser": "^6.0.0","@angular/platform-b​​rowser-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"},开发依赖":{"@angular/compiler-cli": "^6.0.0","@angular-devkit/build-angular": "~0.6.0","打字稿": "~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",业力":~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",量角器":~5.3.0"，"ts-node": "~5.0.1","tslint": "~5.9.1"}}

当我在 Safari(我的默认浏览器)上检查代码时，我收到此错误代码.

错误:mat-form-field 必须包含一个 MatFormFieldControl.

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

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

解决方案

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

import { BrowserModule } from '@angular/platform-b​​rowser';从@angular/core"导入 { NgModule, CUSTOM_ELEMENTS_SCHEMA, Pipe, PipeTransform };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从@angular/router"导入 { RouterModule, Routes };//角材质从@angular/platform-b​​rowser/animations"导入 {BrowserAnimationsModule}；从@angular/cdk/a11y"导入{A11yModule}；从 '@angular/cdk/bidi' 导入 {BidiModule}；从 '@angular/cdk/observers' 导入 {ObserversModule}；从@angular/cdk/overlay"导入{OverlayModule}；从@angular/cdk/platform"导入{PlatformModule}；从 '@angular/cdk/portal' 导入 {PortalModule}；从@angular/cdk/scrolling"导入 {ScrollDispatchModule}；从'@angular/cdk/stepper'导入{CdkStepperModule}；从@angular/cdk/table"导入 {CdkTableModule}；导入 { MatButtonModule, MatCheckboxModule, MatToolbarModule, MatIconModule, MatTableModule, MatFormFieldModule } from '@angular/material';进口 { 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来自'@angular/material';//成分从 './app.component' 导入 { AppComponent };import { NavbarComponent } from './components/navbar/navbar.component';import { SidenavComponent, GroupByPipe } from './components/sidenav/sidenav.component';@NgModule({出口:[//CDKA11y模块，双向模块，观察者模块，叠加模块，平台模块，门户模块，滚动调度模块，CdkStepper模块，CdkTable 模块，//材料垫自动完成模块，垫按钮模块，MatButtonToggleModule，垫卡模块，MatCheckbox模块，匹配芯片模块，MatDatepicker 模块，垫对话框模块，垫扩展模块，MatGridList 模块，MatIcon模块，垫输入模块，垫列表模块，垫菜单模块，MatProgressBar 模块，MatProgressSpinnerModule，MatRadio模块，MatRipple模块，垫选择模块，MatSidenav模块，MatSlideToggleModule，垫滑块模块，MatSnackBar模块，垫步进模块，垫表模块，MatTabs 模块，垫工具栏模块，MatTooltip 模块，MatNativeDateModule，MatPaginator 模块，垫排序模块，MatFormField 模块，布局模块，NgMatSearchBar 模块//弹性布局模块]})导出类 MaterialModule {}@NgModule({声明: [应用组件，导航栏组件，Sidenav组件],进口:[RouterModule.forRoot(appRoutes),浏览器模块，表单模块，反应形式模块，浏览器动画模块，材料模块],entryComponents: [AddArtikelComponent],供应商: [],引导程序:[AppComponent]，架构:[ CUSTOM_ELEMENTS_SCHEMA ]})导出类 AppModule { }//platformBrowserDynamic().bootstrapModule(AppModule);

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

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>

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]
})

And those are my packages.

{
  "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"
  }
}

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!

解决方案

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屋！