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

Yes you can.

Usually, you need to put your code in action="" . But this isn't old HTML, this is Angular, and it works with Javascript.

So, in order to do that, you need to add the novalidate tag, and tell the form what to do when you validate it.

You also need to declare a submit input instead of your button.

This would look like

<form class="loginForm" novalidate (ngSubmit)="login()" autocomplete="off">

<input type="submit" value="Login" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()"/>

Answer 2

Your button should be inside the form but you have closed it inside the two input fields.

Update your code like this

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <form class="loginForm" #loginForm="ngForm" action="" (submit)="login()" 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>
            <div class = "error"> {{ errMsg }} </div>
            <button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
        </form>
        <hr>
    </div>
</div>

Answer 3

Yes it is possible and quite easy!

First you have to replace

(button)="button()"

with

(ngSubmit)="login()"

and remove the click handler from the button and change the type to submit.

Both lines changed look like this:

<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" (ngSubmit)="login()" method="POST">

and:

<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid">Login</button

Dont forget that this way, that button() does not get called.

Angular documentation is really helpful on most of the generel topics, maybe you should take a look there.

Additionally you should consider reading up on some basic information about forms. I personally suggest: forms on MDN and buttons on MDN .

Answer 4

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>

Answer 5

Here's a strapped version of my form for sending comments. As you see, I prevented the ENTER event on textarea and that will cause pressing ENTER while focused on textarea to not make a new line (but you can use SHIFT + ENTER). Pressing enter sends a form.

<form #addCommentForm="ngForm" (keydown.enter)="addComment(addCommentForm.value)">
    <textarea (keydown.enter)="$event.preventDefault()" type="text" placeholder="Leave a comment..." name="description" #description="ngModel" [(ngModel)]="comment.description"></textarea>
</form>

Answer 6

尝试一下

<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>