import { Component } from '@angular/core';
import { NavController,LoadingController } from 'ionic-angular';
import {Validators, FormBuilder,FormGroup,FormControl } from '@angular/forms';


@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class Login {

  constructor(public navCtrl: NavController,
              public loadingCtrl: LoadingController,
              public formbuilder:FormBuilder,
              public userform:FormGroup,
              public username:FormControl,
              public password:FormControl
              ) {}



  ionViewLoaded() {
                console.log('Hello Login Page');
               this.userform = this.formbuilder.group({
                username: ['', Validators.required],
                password: ['',Validators.required]
            });
        }
}

<ion-header>
   <ion-navbar>
       <ion-title>
           User Login
       </ion-title>
   </ion-navbar>
</ion-header>
<ion-content >
    <form [formGroup]="userform" (ngSubmit)="onCommit()">
        <ion-item>
            <ion-label>username</ion-label>
            <ion-input type="text" formControlName="username" name="username"></ion-input>
        </ion-item>
         <ion-item>
            <ion-label>password</ion-label>
            <ion-input type="password" formControlName="password" name="password"></ion-input>
        </ion-item>
    </form>
    <div padding>
         <button ion-button type="submit" block
        [disabled]="!userform.controls.username.valid || !userform.controls.password.valid"
        >login</button>
    </div>
</ion-content>