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>
Related
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>
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 made this:
<form action="links.php" method="get">
<input type="text" name="link" value="" style="height:25px;length:0px;font-size:8pt;"><br>
Direct: <input type="submit"><br>
Show: <input type="submit">
</form>
Is there any way I can pass a parameter when I press a different button? When I click now it sends me to links.php?link= which is good, but I want to do so that if I click one of the buttons, it sends me to links.php?link=&up=no.
I think I found a solution but it uses javascript, I want to do it with HTML only.
If you're looking to add a parameter based on what submit button was pressed, you can add a name to each of them:
<form action="links.php" method="get">
<input type="text" name="link" value="" style="height:25px;length:0px;font-size:8pt;"><br>
Direct: <input type="submit" name="direct"><br>
Show: <input type="submit" name="show">
</form>
Pressing the direct submit button will give:
?link=&direct=...
Pressing the show button will give:
?link=&show=...
edit
In the event that you want to pass a specific value for each button (which isn't tied to it's text like a submit input is), use the button tag instead of the input tag and pass it explicitly:
<form action="links.php" method="get">
<input type="text" name="link" value="" style="height:25px;length:0px;font-size:8pt;"><br>
Direct: <button name="direct" value="foo">Submit</button><br>
Show: <button name="name" value="bar">Submit</button>
</form>
which would result in: ?link=&direct=foo and ?link=&show=bar
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.
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/