CODEWITHSUNDEEP
htmlangular
wiki
wiki

Reputation: 195

How to focus for a button after enter key in angular

Suppose that I have the below form in an angular component. How do I focus on the Log in button after clicking on enter key?

<form class="mt-4" #contactform="ngForm">
  <input type="text" class="form-control" aria-describedby="emailHelp" placeholder="" [(ngModel)]="model.eMail" required>
  <input type="password" class="form-control" placeholder="" [(ngModel)]="model.password" required>
  <button type="button" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
  <button type="button" class="btn btn-primary btn-lg btn-block">Clear</button>
</form>

Thanks in advance.

Upvotes: 2

Views: 1304

Answers (1)

noam steiner
noam steiner

Reputation: 4444

Change the login button to type "submit" - and the enter key will trigger it.

<button type="submit" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>

You can also use ngSubmit on the form tag instead of click:

<form class="mt-4" #contactform="ngForm" (ngSubmit)="onClickSend(contactform)">
    <button type="submit" class="btn btn-primary btn-lg btn-block">Log in</button>
</form>

Upvotes: 1

Related Questions