Is it possible to submit a form that does not have submit button (by pressing enter) example :
<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form
Add a comment
|
16 Answers
You can also add (keyup.enter)="xxxx()"
6 Comments
Scott R. Frost
This works great if you just have a plain old function you'd like to call instead of a submit handler
trungvose
This approach were mentioned on Angular docs. angular.io/docs/ts/latest/guide/…
switch87
This is the only way it works in my situation, thanks!
Scott Byers
This should be the accepted answer. Elegance in only the way Angular can achieve. Brilliant.
Rafael Neto
New mention in the Angular documentation: angular.io/guide/user-input#key-event-filtering-with-keyenter
|
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
}
}
Comments
Edit:
<form (submit)="submit()" >
<input />
<button type="submit" style="display:none">hidden submit</button>
</form>
In order to use this method, you need to have a submit button even if it's not displayed "Thanks for Toolkit's answer"
Old Answer:
Yes, exactly as you wrote it, except the event name is (submit) instead of (ngSubmit):
<form [ngFormModel]="xxx" (submit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form>
answered Jun 1, 2016 at 21:50
Abdulrahman Alsoghayer
16.6k7 gold badges53 silver badges57 bronze badges
3 Comments
Toolkit
can you please provide a plunker? because it doesn't work
Moulde
Use "visibility: hidden;" instead. The "display:none;" worked in chrome, but not in safari.
janssen-dev
This should be used, except that the submit-button should not be hidden but visible because some folks will look for that button and won't bother to press enter.
I prefer (keydown.enter)="mySubmit()" because there won't be added a line break if the cursor was somewhere within a <textarea> but not at its end.
1 Comment
rhysclay
This should be the accepted solution - much cleaner
This way is much simple...
<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">
</form>
4 Comments
Loutocký
Thank you, it is easier when I expected. Solved like this: <input type="text" class="form-control" [(ngModel)]="object.LanguageTableData" (blur)="mymethod()" (keyup.enter)="mymethod()" />
Helen
much easier this way rather than sending a function with $event. Thank you!
RenanSS
much better. no hidden buttons or js. Pure angular way
Jordan
Had to do like this: <form #f="ngForm" (keyup.enter)="appendSigBlock(f.value)"> using Angular 9, but works great.
add this inside your input tag
<input type="text" (keyup.enter)="yourMethod()" />
1 Comment
Santosh
thank brother. I prefer this option over the selected answer.
(keyup.enter)="methodname()"
this should work and already mentioned in many answers, however that should be present on form tag and not on button.
Comments
Always use keydown.enter instead of keyup.enter to avoid lagging.
<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>
and function inside component.ts
textValue : string = '';
sendMessage() {
console.log(this.textValue);
this.textValue = '';
}
Comments
Most answers here suggest using something like:
<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="yourMethod()">
</form>
This approach does not result in the form object being marked as submitted. You might not care for this, but if you're using something like @ngspot/ngx-errors (shameless self-promotion) for displaying validation errors, you gonna want to fix that. Here's how:
<form [formGroup]="form" (ngSubmit)="yourMethod()" (keyup.enter)="submitBtn.click()">
<button #submitBtn>Submit</button>
</form>
Comments
Just simply add (keyup.enter)="yourFunction()"
Comments
Hopefully this can help somebody: for some reason I couldn't track because of lack of time, if you have a form like:
<form (ngSubmit)="doSubmit($event)">
<button (click)="clearForm()">Clear</button>
<button type="submit">Submit</button>
</form>
when you hit the Enter button, the clearForm function is called, even though the expected behaviour was to call the doSubmit function.
Changing the Clear button to a <a> tag solved the issue for me.
I would still like to know if that's expected or not. Seems confusing to me
1 Comment
radio_head
inorder to avoid that, you have specify type="button" for Clear button
If you want to include both simpler than what I saw here, you can do it just by including your button inside form.
Example with a function sending a message:
<form>
<mat-form-field> <!-- In my case I'm using material design -->
<input matInput #message maxlength="256" placeholder="Message">
</mat-form-field>
<button (click)="addMessage(message.value)">Send message
</button>
</form>
You can choose between clicking on the button or pressing enter key.
1 Comment
Jordan
Had to use this in combo with @Clayton K. N. Passos answer and worked great!
If you want to include both - accept on enter and accept on click then do -
<div class="form-group">
<input class="form-control" type="text"
name="search" placeholder="Enter Search Text"
[(ngModel)]="filterdata"
(keyup.enter)="searchByText(filterdata)">
<button type="submit"
(click)="searchByText(filterdata)" >
</div>
Comments
Well, there's a small caveat here, I would say. None of the above would work if you want to submit the form until unless you click anywhere on the form or specifically on the input field.
Well if you want to submit the form just by hitting enter without clicking anywhere, you need to declare it globally in html:
<button (window:keypress)="onSomeAction($event)">
and in TS file :
onSomeAction(event){
if(event.keyCode===13){
//submit form
}
}
OR
<button (window:keypress.enter)="onSomeAction($event)">
Comments
<form [ngFormModel]="xxx" (keyup.enter)="xxxx()" (ngSubmit)="xxxx()">
<input [(ngModel)]="lxxR" ngControl="xxxxx"/>
</form>
