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>
try use keyup.enter or keydown.enter
<button type="submit" (keyup.enter)="search(...)">Search</button>
In case anyone is wondering what input value
<input (keydown.enter)="search($event.target.value)" />
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.
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">
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()"
/>
Another alternative can be to execute the Keydown or KeyUp in the tag of the Form
<form name="nameForm" [formGroup]="groupForm" (keydown.enter)="executeFunction()" >
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)">
Just use ngSubmit in combination with a submit button.
<form (ngSubmit)="onSave()" [formGroup]="userForm">
<!-- ...form inputs -->
<button class="btn btn-primary type="submit" [disabled]="!userForm.valid">
Save
</button>
</form>
type="submit" property alone is not enough.
The important thing for this event is the emphasis to submit the form the old fashioned way.
I mean, it must be in the form tag (submit) and a button that is included in the same form and this button must have the type="submit" property.
The onSubmit function in the first and seventh lines captures the enter key event and the normal mouse click event for you.
However, when you use both, http requests are sent twice. I don't know if this is a bug, but only the function you linked to the form submission is sufficient.
Many of us don't follow this rule when developing with Angular. It allows us to make a basic Accessibility and User Friendly forms.
<form [formGroup]="form" (submit)="onSubmit()">
<mat-form-field>
<mat-label>Title</mat-label>
<input matInput formControlName="title">
</mat-form-field>
<button type="submit" mat-raised-button (click)="onSubmit()">
SUBMIT
</button>
</form>
Related
I'm have a strange issue in my Angular form. I have a simple form like the following:
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<button (click)="addUser()">Add a user</button>
<input name="first" ngModel required #first="ngModel">
<input name="last" ngModel>
<button>Submit</button>
</form>
The problem is that when I press ENTER when in the form, instead of submitting, it fires the function addUser(), which is not what I want it to do.
How do I stop it from "clicking" ADD A USER and firing addUser()?
The solution was simply to add the type attribute with value button to the first button.
The browser assigns type="submit" by default to all buttons.
Simply needed to change
<button (click)="addUser()">Add a user</button>
to
<button (click)="addUser()" type="button">Add a user</button>
I have a simple form with one input field
<form ng-submit="UsernameModalInstance.submitUsername()">
<input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">
</form>
Note: this input field does not allow for no entry or any white spaces
Thus: my ng-submit function only fires when these requirements have been met
this is the functionality i want
However, there is another way to submit the form!
underneath this form i have a button:
<button class="btn btn-primary" title="You must enter a username to proceed" ng-click="UsernameModalInstance.submitUsername()" type="button">Submit Username</button>
The ng-click fires the same function as the ng-submit on the input
BUT I want this submit username button to have the same requirements as the form input.
currently, clicking the button will fire the function without meeting any of the requirements of having to enter something and no white spaces!
Is there a way to do this?
Here is a simple example. You can use it with ng-submit i.e replace onsubmit with ng-submit and no need of ng-click if you keep the submit button inside form element
function submitUsername(){
console.log("valid username");
event.preventDefault();//just to so it works here might not need in your code
}
<form onsubmit="submitUsername()">
<input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">
<button type="submit">Submit</button>
</form>
I have one page with two separate forms. Most input fields are required. When I click the submit button on the second form, it asks me to fill out the required fields in the first form.
How do I make sure that it only validates the form in which I clicked the submit button?
<form method="post" action="index.php" name="orderQuick" id="orderQuick">
<input type="text" name="street" id="street" required>
<button type="submit" name="submitBtn" id="submitBtn">Submit</button>
</form>
<form method="post" action="index.php" name="order" id="order">
<input type="text" name="street2" id="street2" required>
<button type="submit" name="submitBtn2" id="submitBtn2">Submit</button>
</form>
I think it is because you have not closed <button> tag so it is considering both input type in one form. Close <button> tag.I think it will solve your issue.
I think you will need to use the jqueryvalidation plugin: (http://jqueryvalidation.org/valid/)
Using this plugin, on the click of the respective submit buttons, you just need to call the method:
$("#orderQuick").valid();
and
$("#order").valid();
This should solve your issue.
First of all, excuse me if my English is bad, that's not mother tongue.
So, I have a set up a search form that returns maximum 20 items, and if there is more than that, then the user can switch between the pages. So there would be an unknown number of pages. Here's how I do right now : (example with two pages)
<form class="searchForm" method="POST" action="~/Search/Products">
<input type="hidden" name="keyword" value="#Model.Keyword" />
<input type="hidden" name="pagenum" value="{{choosedPage}}" id="page" />
<button type="submit" ng-click="choosedPage=1" class="btn btn-primary">1</button>
<button type="submit" ng-click="choosedPage=2" class="btn btn-primary">2</button>
</form>
So, when the user clicks on the button, it changes "choosedPage" and directly fires the submit action with the page that we want. I Check that, all works fine.
But it seems pretty hacky though, what if the submit action is fired before the ng-click action ? Is it even possible ? Have you another idea that that (and other than creating 1 form per page button).
Thank you.
So, first of all, you don't really need Angular to do what you are doing. You can just assign name and value to the buttons with type="submit".
<form class="searchForm" method="POST" action="~/Search/Products">
<input type="hidden" name="keyword" value="#Model.Keyword" />
<button type="submit" name="pagenum" value="1" class="btn btn-primary">1</button>
<button type="submit" name="pagenum" value="2" class="btn btn-primary">2</button>
</form>
The Web actually existed before Angular, you know :)
But, if you need to perform some additional Angular tasks, you can use ng-submit on the form element instead of ng-click on the button:
<form ng-submit="doSomethingBeforeSubmit($event)"
method="POST" action="~/Search/Products">
...
</form>
This will invoke $scope.doSomethingBeforeSubmit before the form is submitted. $event is a special variable that you can pass to your doSomethingBeforeSubmit function.
Here's the ng-submit documentation.
I have an HTML form in which I use the browser's native validation. However, inside my form I have another button unrelated to the submit that does a different action. When I press that button howver, it fires off the browser's validation, how can I disable that
<form>
<input type="text" required />
<button>I shouldn't fire validation</button>
<input type="submit" value="I fire the validation">
</form>
In HTML 5, button has a default behavior as a submit type. So
<button type="button">Button</button>
A button by it's own don't fire the submit. You probably have an event setted on it. If you don't, try this other sol
You could use
<form>
<input type="text" required />
<button type="button">I shouldn't fire validation</button>
<input type="submit" value="I fire the validation">
</form>
It seems weird, but I got if from this example (just in the end of 4.9 section):
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#concept-button
And you can see it working: http://jsfiddle.net/xmhpF/