<div class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6">
    <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
    <div class="form-group">
            <label>Username:</label>
            <input type="text" class="user name" placeholder="Enter user name" name="username" [(ngModel)]="userName"/>
        </div>
        <div class="form-group">
            <label>Password:</label>
            <input type="password" class="password" placeholder="Enter password" name="password" [(ngModel)]="password"/>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-info" [disabled]="!loginForm.valid">Submit</button>
        </div>
    </form>
        <div *ngIf="errorMessage" class="alert alert-danger">
        <strong>Login error!</strong> Invalid credentails.
    </div>
</div>

export class LoginComponent {

  loginForm:FormGroup;
  private sub:any
  userName:string;
  password:string;

  errorMessage: string;

  constructor(private loginService:LoginService,private router:Router) { }

    onSubmit(value:any){
      console.log('form submit clicked');
    console.log(this.userName,this.password);

    this.loginService.login(this.userName,this.password).subscribe(data=>{
      console.log(data);

    },error =>  this.errorMessage = <any>error);


  }

}