Placeholder position - Angular Material mdInput

Question

I am trying to create a Form for my website. I have came into a error/issue/problem with Input and its Placeholder.

It supposed to be easy to implement and it looks like this. Placeholder is under the Input field and not "inside" it, also it's not animating in the upper part of input field when text has been entered.

<md-form-field>

    <input mdInput [formControl]="messageForm.controls['email']">
    <md-placeholder>E-mail</md-placeholder>

</md-form-field>

I have tried to wrap it in md-input-container, but it did not change anything. It still behaves same way.

I am having also regular Inputs and thier placeholders are in the right place - inside input field.

Some code samples, if anything else needed - you know the drill...

Component:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators }   from '@angular/forms';

const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

@Component({
  selector: 'contact-us',
  templateUrl: './contact-us.component.html',
  styleUrls: ['./contact-us.component.scss']
})
export class ContactUsComponent {

  messageForm : FormGroup;

  constructor(formBuilder: FormBuilder) {

    this.messageForm = formBuilder.group({
      'firstname' : [null, Validators.required],
      'lastname':   [null, Validators.required],
      'email' :     [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.pattern(EMAIL_REGEX)])],
      'message' :   [null, Validators.required]
    })
  }

  sendMessage() {
    console.log("");
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
import { ContactUsComponent } from './components/contact-us.component/contact-us.component';
import { HeaderComponent } from './components/header.component/header.component';
import { FooterComponent } from './components/footer.component/footer.component';
import { HomeComponent } from './components/home.component/home.component';
import { AboutComponent } from './components/about.component/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    AboutComponent,
    ContactUsComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    MaterialModule,
    AppRoutingModule
  ],
  providers: [  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am also using following dependencies:

  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/cdk": "^2.0.0-beta.10",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "ng2-popover": "0.0.14",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Answer 1

As it turned out, I have found the solution.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Adding the Theme to the project made it working. They should have specified in the docs that it's mandatory to import those... Nonetheless, now it's working.

Thanks to you all for a help

Answer 2

Specify the placeholder in the input tag itself

<input mdInput [formControl]="messageForm.controls['email']" placeholder="Email">

This should do the trick