Angular Material 6 doesn't shows form styles

Question

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!

Answer 1

You need to add MatInputModule to app.module.ts

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

Hope that helps!

Answer 2

Please check also that theme is configured:

styles.scss:

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

styles.css:

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

Reference: https://material.angular.io/guide/theming

Angular 2 Material can't load style

Answer 3

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);

Answer 4

You have to import some extra modules. MatInputModule, and you also may have to add FormsModule, and ReactiveFormsModule. The two last one might not be necessary though.

You also need to import an Angular Material theme in your styles.css/styles.scss like this: @import "~@angular/material/prebuilt-themes/indigo-pink.css";

To avoid your error

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

try adding a control to your 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>

and define the formControl in your component:

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

EDIT: You should not import both NoopAnimationsModule, and BrowserAnimationsModule. Use one of them. And I do not knwo if it matters, but set you @angular/material and @angular/cdk to ^6.0.0, so that it matches all other @angular dependencies.