Angular Material 6 не показывает стили форм

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

Пожалуйста, проверьте также, что тема настроена:

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

Угловой 2 Материал не может загрузить стиль

Answer 2

Вы должны импортировать несколько дополнительных модулей. MatInputModule, и вам также может понадобиться добавить FormsModule и ReactiveFormsModule. Два последних, возможно, не нужны.

Вам также необходимо импортировать тему Angular Material в ваши styles.css / styles.scss, например: @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Чтобы избежать вашей ошибки

Ошибка: поле mat-form-field должно содержать MatFormFieldControl.

попробуйте добавить элемент управления в поле mat-form:

   <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

Вам необходимо добавить MatInputModule в app.module.ts

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

Надеюсь, это поможет!