Angular 4 Submit Form by Pressing Enter With Login Button

angular 4 submit form by pressing enter with login button

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>

angular2 submit form by pressing enter without submit button

Maybe you add keypress or keydown to the input fields and assign the event to function that will do the submit when enter is clicked.

Your template would look like this

    <form (keydown)="keyDownFunction($event)">
      <input type="text" />
    </form

And you function inside the your class would look like this

    keyDownFunction(event) {
      if (event.keyCode === 13) {
        alert('you just pressed the enter key');
        // rest of your code
      }
    }

How to submit a form by pressing Enter Key from any field in the form in Angular Material?

you should be able to just bind to the ngSubmit event:

<form class="example-form" [formGroup]="docForm" (ngSubmit)="docForm.valid && docForm.dirty && update()">

for this to trigger, you need a submit type element somewhere inside your form, it may be hidden though:

<input [style.display]="'none'" type="submit">

or if you prefer, you may just bind to the keyup.enter event on the form:

<form class="example-form" [formGroup]="docForm" (keyup.enter)="docForm.valid && docForm.dirty && update()">

Angular Submit by pressing Enter key or click button

If you want to do it without form,
https://stackblitz.com/edit/angular-4k2xr4

export class AppComponent  {
  name = 'Angular';

  Log() {
    this.name  = "Logged In"
  }

  handleKeyboardEvent(event) {
    if (event.keyCode === 13) {
      this.Log()
    }
  }
}

<hello name="{{ name }}"></hello>
<div class="BLog" (keydown)="handleKeyboardEvent($event)">
  <input value="type and press enter">
    <div class="Log">
        Log in
    </div>
</div>

Angular 5 Button Submit On Enter Key Press

You could also use a dummy form arround it like:

<mat-card-footer>
<form (submit)="search(ref, id, forename, surname, postcode)" action="#">
  <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search." >Search</button>
</form>
</mat-card-footer>

the search function has to return false to make sure that the action doesn't get executed.

Just make sure the form is focused (should be when you have the input in the form) when you press enter.

---

Related Topics