Angular 5 Button Submit On Enter Key Press
Solution 1
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.
Solution 2
try use keyup.enter or keydown.enter
<button type="submit" (keyup.enter)="search(...)">Search</button>
Solution 3
In case anyone is wondering what input value
<input (keydown.enter)="search($event.target.value)" />
Solution 4
In addition to other answers which helped me, you can also add to surrounding div. In my case this was for sign on with user Name/Password fields.
<div (keyup.enter)="login()" class="container-fluid">
Solution 5
Try to use keyup.enter
but make sure to use it inside your input
tag
<input
matInput
placeholder="enter key word"
[(ngModel)]="keyword"
(keyup.enter)="addToKeywords()"
/>
murday1983
I started my IT career as a web tester and am now a frontend web developer and UX web designer.
Updated on January 17, 2022Comments
-
murday1983 over 2 years
I have an Angular 5 form application using all the usual models but on the forms I want the form to submit without having to physically click on the 'Submit' button.
I know it's normally as easy as adding
type=submit
to my button element but it does not seem to be working at all.I don't really want to call an
onclick
function just to get it working. Can anyone suggest anything that I may be missing.<form (submit)="search(ref, id, forename, surname, postcode)" action="#"> <mat-card> <mat-card-title class="firstCard">Investor/Adviser search</mat-card-title> <mat-card-content> <p *ngIf="this.noCriteria" class="errorMessage">Please enter search criteria.</p> <p *ngIf="this.notFound" class="errorMessage">No investor's or adviser's found.</p> <mat-form-field> <input matInput id="invReference" placeholder="Investor/Adviser reference (e.g. SCC/AJBS)" #ref> </mat-form-field> <mat-form-field> <input matInput id="invId" placeholder="Investor/Adviser ID" type="number" #id> </mat-form-field> <mat-form-field> <input matInput id="invForname" placeholder="Forename" #forename> </mat-form-field> <mat-form-field> <input matInput id="invSurname" placeholder="Surname" #surname> </mat-form-field> <mat-form-field> <input matInput id="invPostcode" placeholder="Postcode" #postcode> </mat-form-field> </mat-card-content> <mat-card-footer> <button mat-raised-button type="submit" class="successButton" id="invSearch" title="Click to perform search.">Search</button> </mat-card-footer> </mat-card> </form>
-
murday1983 about 6 yearsI have added the whole HTML from my component as your suggested fixed doesn't submit when I click 'Enter'
-
Optimist Rohit over 2 yearsThis is simple and works like a charm.
-
eddy over 2 yearsOr you could just use (ngSubmit)="onSubmit()"
-
Kieran Ryan over 2 yearsIts sufficient at least in ionic project to decorate button with window:keypress event. Thanks Kamil, saved me having to write a @HostListener.. very succinct solution :-)
-
Kieran Ryan over 2 yearsUpdate: I spoke too soon.. of course window:keypress is too broad.. only interested in "return" key so maybe best to use @HostListener afterall :-)
-
pcnate about 2 years
event.keyCode
is marked as deprecated. useevent.key === 'Enter'
instead of the first example -
Mauricio Gracia Gutierrez about 2 yearsIn case you are NOT using a FORM - here is solution stackoverflow.com/a/71092233/1461862 - it works for dialogs