CODEWITHSUNDEEP
angularangular-materialangular-material2
Djent
Djent

Reputation: 3467

Angular Material input fields are not styled

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:
enter image description here

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.

Upvotes: 11

Views: 15117

Answers (3)

user2267367
user2267367

Reputation: 872

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.

Upvotes: 2

Kevin Beal
Kevin Beal

Reputation: 10849

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

Upvotes: 14

FAISAL
FAISAL

Reputation: 34673

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

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

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

Upvotes: 20

Related Questions