<md-whiteframe layout="row" flex flex-md="50" flex-lg="50" flex-gt-lg="33" class="md-whiteframe-z2" layout-fill>
    <div layout="row" layout-fill layout-margin layout-padding>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm)" layout="row" layout-fill layout-padding layout-margin>
            <md-input ngControl="email" placeholder="Email" aria-label="email" formControlName="email" #email></md-input>
            <md-input ngControl="password" type="password" placeholder="Password"  aria-label="password" formControlName="password"></md-input>

            <div layout="row" layout-align="space-between center">
                <button md-button>Forgot password?</button>
                <button [disabled]="!loginForm.valid" md-raised-button class="md-primary" type="submit" aria-label="login">Sign In</button>
            </div>
        </form>
        <div [hidden]="error == ''">
            <md-toolbar class="md-warn" layout="row" layout-fill layout-padding layout-margin>
                <p class="md-body-1">{{ error }}</p>
            </md-toolbar>
        </div>
        <md-divider></md-divider>
        <div layout="row" layout-align="center">
            <button md-button >Need an account?</button>
        </div>
    </div>
</md-whiteframe>

import {Component, OnInit} from '@angular/core';
import {MdButton} from '@angular2-material/button';
import {MD_SIDENAV_DIRECTIVES} from '@angular2-material/sidenav';
import {MD_CARD_DIRECTIVES} from '@angular2-material/card';
import {MdInput, MD_INPUT_DIRECTIVES} from '@angular2-material/input';
import {MdCheckbox} from '@angular2-material/checkbox';
import {MdIcon, MdIconRegistry} from '@angular2-material/icon';
import {FORM_DIRECTIVES, FormGroup, REACTIVE_FORM_DIRECTIVES, FormBuilder, Validators, FormControl} from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'app-login',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css'],
    directives: [
        FORM_DIRECTIVES,
        REACTIVE_FORM_DIRECTIVES,
        MD_INPUT_DIRECTIVES,
        MD_SIDENAV_DIRECTIVES,
        MD_CARD_DIRECTIVES,
        MdButton,
        MdInput,
        MdCheckbox,
        MdIcon
    ],
    providers: [MdIconRegistry]
})

export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    user = {
        email: '',
        password: ''
    };

    constructor(fb: FormBuilder) {
        this.loginForm = fb.group({
            email: ['', Validators.required],
            password: ['', Validators.compose( [Validators.required, hasNumbers] ) ]
        });

    }

    ngOnInit() {

    }

    onSubmit(form) {
        this.user =  this.loginForm.value;
        console.log(form)
    }

}


//Custom validator
function hasNumbers(control: FormControl): {[s: string]: boolean} {
    //return something only if validation fails
    if(!control.value.match('\d+')) {
        return {noNumbers: true};
    }
}

.md-input-placeholder {
    font-size: 12px;
}