angular 4 submit form by pressing enter with login button

Question

Is it possible to submit a form that have a submit button (by pressing enter)

I have two text fields by clicking the login button I am able to process the outcome but I am unable to do it by hitting enter.

Here is the HTML code(updated with full code)

this is signin.component.html

<div class="modal-content" style="padding: 10px;" id="login" *ngIf="show">
    <div class="modal-body text-left">
        <div class="login">
            <h2>Login</h2>
            <hr>
            <div class="row socialButtons">
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
                        <i class="fa fa-facebook visible-xs"></i>
                        <span class="hidden-xs">Facebook</span>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
                        <i class="fa fa-linkedin visible-xs"></i>
                        <span class="hidden-xs">Linkedin</span>
                    </a>
                </div>  
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
                        <i class="fa fa-google-plus visible-xs"></i>
                        <span class="hidden-xs">Google</span>
                    </a>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
                        <div class="form-group">
                            <label class="control-label" for="signupName">Email</label>
                            <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="signinPassword">Password</label>
                            <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
                        </div>
                    </form>
                    <div class = "error"> {{ errMsg }} </div>
                    <button class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
                    <hr>
                </div>
            </div>
            <div class="row row-sm-offset-3">
                <div class="col-xs-12 col-sm-12 col-md-6">      
                    <p class="forgotPwd">
                        Forgot password? <a href="javascript:void(0)" (click)="reset()"> Reset</a>
                    </p>
                    <p class="forgotPwd">
                        New User? <a href="javascript:void(0)" (click)="signup()"> Register now</a>
                    </p>
                </div>
            </div>          
        </div>
    </div>
</div>

<div *ngIf="showSignUp">
  <app-sign-up></app-sign-up>
</div>

<div *ngIf="showForgotPassword">
  <app-forgot-password></app-forgot-password>
</div>

this signin.component.ts file

import { Component, OnInit } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { Router } from '@angular/router';

import { AuthService } from '../services/auth/auth.service';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {

  username:string;
  password:string;
  show = true;
  showSignUp = false;
  showForgotPassword = false;
  errMsg = "";

  constructor(
    private authService: AuthService,
    public activeModal: NgbActiveModal,
    ) { }

  ngOnInit() {
    this.authService.getEmitter().subscribe(res => {
      if(res){
        this.activeModal.dismiss('success');
      }
      else{
        this.username = "";
        this.password = "";
        this.errMsg = "Invalid Username/Password";
      }
    })
  }

  signInGoogle(){
    this.authService.loginWithGoogle();
  }

  signInFacebook(){
    this.authService.loginWithFacebook();
  }

  signInLinkedin(){
    this.authService.loginWithLinkedin();
  }

  logOut(){
    this.authService.logOut();
  }

  login(){
   this.authService.login(this.username,this.password);
  }

  reset(){
    this.show = false;
    this.showSignUp = false;
    this.showForgotPassword = true;
  }

  signup(){
    this.show = false;
    this.showSignUp = true;
    this.showForgotPassword = false;
  }
}

Answer 1

Use (keyup.enter)="focusableSubmit.click()" to input Password and call #focusableSubmit to Button login, this would perform the task and same for button as shown in code below.

 <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
                    <div class="form-group">
                        <label class="control-label" for="signupName">Email</label>
                        <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="signinPassword">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required (keyup.enter)="focusableSubmit.click()">
                    </div>
                </form>
                <div class = "error"> {{ errMsg }} </div>
                <button #focusableSubmit class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
                <hr>
            </div>
        </div>