Angular Material input fields are not styled

Question

I want to use angular material in my project.
I've added @import '~@angular/material/prebuilt-themes/pink-bluegrey.css'; into my style.css file and it works fine - tables, cards, toolbars are styled properly, but forms are not.
I've used code from example here, just by copy and paste, and the outcome looks like this:

What am I doing wrong? Here is my module (it is not main module):

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ImageListComponent} from './image-list.component';
import {ImageListService} from './image-list.service';
import {FileSizePipe} from '../shared/file-size.pipe';
import {
  MdAutocompleteModule,
  MdButtonModule,
  MdCardModule,
  MdChipsModule,
  MdTableModule
} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';
import {EnvironmentVariableComponent, ImageRunComponent} from './image-run.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { InputTestComponent } from './input-test.component';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdCardModule,
    MdChipsModule,
    MdTableModule,
    CdkTableModule,
    MdAutocompleteModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  declarations: [ImageListComponent, FileSizePipe, ImageRunComponent, EnvironmentVariableComponent, InputTestComponent],
  providers: [ImageListService],
  exports: [ImageListComponent, ImageRunComponent, InputTestComponent]
})
export class ImageModule {
}

Here is my main module:

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

import {AppComponent} from './app.component';
import {ImageModule} from './image/image.module';
import {MdToolbarModule} from "@angular/material";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageModule,
    BrowserAnimationsModule,
    MdToolbarModule,
    FormsModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

I don't understand what am I doing wrong. My forms are not looking and behaving as it supposed.

FAISAL · Accepted Answer · 2017-09-16 15:22:22Z

20

You need to import input and form-field modules in your module imports:

import {
    MdInputModule,
    MdFormFieldModule
} from '@angular/material';

// ....
imports: [
    MdInputModule,
    MdFormFieldModule,
],

answered Sep 16, 2017 at 15:22

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Beal · Accepted Answer · 2018-03-13 23:42:17Z

15

This can also happen because you didn't wrap your <input matInput> with a <mat-form-field>.

answered Mar 13, 2018 at 23:42

Kevin Beal

10.9k13 gold badges73 silver badges93 bronze badges

2 Comments

Gereon99 Over a year ago

Thanks, but why is that happening? I would bet that I used matInputs before that weren't wrapped in mat-form-fields and they displayed just fine.

Kevin Beal Over a year ago

Directives can add classes, and if the classes are defined globally, then it's fine, but if there is encapsulation with the styles, then a component is needed to apply the styles. I forget how it's supposed to work in this case, but that could explain it.

user2267367 · Accepted Answer · 2023-06-20 09:50:28Z

2

This question may be quite old, yet it remains prominent in Google searches. The answers provided were correct at the time, but the landscape has since evolved.

You can find the current API at the offical source. I'll highlight the most crucial elements necessary for applying the style to the fields.

Changes to app.module.ts. Make sure you provide the required imports, you can see, that the names of the modules have changed. They aren't MdInputModule etc. anymore. Here is a small example of the modules I am using in my app.module.ts adjust it to the components you want to use:

...
imports: [
    ...
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatInputModule,
    MatCheckboxModule,
    FormsModule,
...
]
...

Add the default theme to your style.scss, adjust indigo-pink to whatever you want to use:

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

The changes to the style.scss might not be required, if your angular.json has already this:

...
"styles": [
   "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
   "src/styles.scss"
],
...

Make sure to use the correct structure and right tags:

<mat-form-field>
  <mat-label>My Label</mat-label>
  <input matInput>
</mat-form-field>

In addition you can apply a default apperance in app.module.ts by adding a provider:

providers: [
    ...
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
     ...
]

The injection token MAT_FORM_FIELD_DEFAULT_OPTIONS opens some options for a global style configuration of your form fields. You can read more about it in the docs

I hope this helps.

answered Jun 20, 2023 at 9:50

user2267367

8809 silver badges20 bronze badges

1 Comment

user2267367 Over a year ago

I want to point out, that my IDE (Intellij) asked me the first time I was using the "mat-form-field" to import "MatFormFieldModule" in my module. But it does not ask for the "MatInputModule" which is important to apply the style too. So make sure you added it to the imports of your module

Collectives™ on Stack Overflow

Angular Material input fields are not styled

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related