import {
    FormBuilder,ControlGroup, Validators, AbstractControl
} from '@angular/common';

export class LoginSignupPage {
    myForm: ControlGroup;
    username: AbstractControl;
    password: AbstractControl;


  constructor(public _nav: NavController, public _api: ApiEndpoint, public  _profile: ProfileService, fb: FormBuilder,public _storage: StorageService) {

      this.myForm = fb.group({
          'username': ['', Validators.compose([Validators.required, emailValidator])],
          'password': ['', Validators.compose( [Validators.required] )]
      });

      this.username = this.myForm.controls['username'];
      this.password = this.myForm.controls['password'];

  }

login() {
    this._api.login(this.username.value, this.password.value);
 }
}

<form [ngFormModel]="myForm" (ngSubmit)="login()">

    <ion-input type="text" ngControl="username"></ion-input>
    <div class="form-error" *ngIf="username.touched && username.errors?.invalidEmail">Invalid email format</div>

     <ion-input type="password" ngControl="password"></ion-input>


                <button type="submit" [disabled]="!myForm.valid" [ngClass]="{'button-outline': !myForm.valid}" block>Login</button>

      <div padding *ngIf="loginError"> {{loginError}}</div>

    </form>