I want to click Save button when I press Enter..For this, I created a directive named "onEnter" but I don't know how to trigger 'ng-click' on savebutton wheen Enter key press. I made a sample here
http://plnkr.co/edit/vnphuxQRQQfVmWtsGhip?p=preview
Please suggest!
If you change:
<input type="button".. value="Save" />
to
<input type="submit".. value="Save"/>
Then the form will act normally listening for the enter event. No need for a directive as it is already built in.
Angular also supports an ng-submit event. This post will provide more information:
Submit form on pressing Enter with AngularJS
Related
I have a validation e.g. ng-required. Those validations are executed when user changes the value in input field.
But when I am creating new form and user clicks on save button validations are not executed, I need to check validation on save button click
Currently I am checking Form.$dirty.
Any ideas about the right way of handling validations in AngularJS?
You could use the built-in attribute $valid and use it in the ng-submit:
<form name="testForm" novalidate ng-submit="testForm.$valid && submit()">
The submit function is called only when testForm.$valid is true.
I have many buttons on my page but none are inside a form. I already assigned one button and changed its color so it shows as a bootstrap primary button.
How can I make it so that when a user is on the page and they click enter then the button click event for that button is called?
I am not sure about what you are asking; but you can do the following, if you have a controller with the function add() attached to the scope:
<form ng-submit="add()">
<input type="text" ng-model="myModel">
<input type="submit" value="Add"/>
</form>
The above adds the value entered in the input to the model.
I suggest using a <form ...> around your elements. Because if you rely on a custom keypress detector, and you have more than one button, it will activate all of them. The <form ...> dictates which button is to be submitted when a user is in a particular input field and hits Enter.
Your form doesn't even need to have an action="..." or method="...". You could just as well use ng-submit="yourFormParser()".
ng-submit will not useful to you, because your form submit event is different.
The only option remains is, you can take use of ng-enter directive, but you should manually bind it wherever you want. I believe this is last option.
ng-enter="myEvent()"
HTML
<input type="text/url/email/number/checkbox/radio" ng-model="test" ng-enter="myEvent()"/>
Hope this could help you, Thanks.
I am creating a form wizard which has three forms in three different tabs and the user can only go to next tab once the form in the current tab is validated.
It works fine as long as there are no controllers on each form. Since I need to do some logic, I am attaching controllers to each of these forms but once the controllers are put, the tabs are getting enabled even when the form is invalid. Here's the plunkr link
`http://jsfiddle.net/bs4agngu/
Regards,
Charan
check this : how to disable external button in angular when form is invalid
you can use something like this :
<input ng-disabled="formName.$invalid" type="button" class="btn btn-primary" ng-click="$broadcast('Save')" />
In angularjs I'm wondering what the differences are between ng-submit and ng-click? Specifically, pros and cons of each and when should you one or the other? Thanks!
**EDIT**
I've looked in to this a bit more but I'm still wondering what (if any) the benefit is of using ng-submit? Could you use an ng-click in place of all ng-submits? Would this cause any problems? Thanks again!
The ngSubmit directive binds to the submit event in the browser, which is fired when a form is submitted.
From MDN:
Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)
So you might use it to submit a user sign-up form, or something like that.
On the other hand, the ngClick directive can apply to any kind of element.
From source:
The ngClick directive allows you to specify custom behavior when an
element is clicked.
Use it to allow your user to interact with your page in some way other than submitting a form. Maybe to click on a 'previous' or 'next' pager button, or maybe a map or something.
Angular prevents the default action (form submission to the server) unless the element has action, data-action, or x-action attributes specified.So when using angular with forms without these atributes ng-click and ng-submit can be used to specify which javascript method to call.In either call you can get all input values in a scope because of two-way data binding property of angular.
Could you use an ng-click in place of all ng-submits? Would this cause any problems?
it can be used but when using ng-click it does not take html input attributes (like required,min-max,maxlength) into account and executes method body immediately.
My favorite reason for using ng-submit is that it allows you to press the <Enter> key while focused on a form input etc. and the form will submit. (Assuming of course that you have a button of type="submit" in the form.)
Its more keyboard friendly and accessibility friendly than having ng-click on a button, because with ng-submit, a user can click on the submit button or they can press <Enter>.
If we want the form not to be submitted when it is invalid, then instead of ng-click on the button, we will use ng-submit directive on the form itself
<div class="row">
<form name="adduser" ng-submit="AddUser(adduser.$valid)">
<div id="name-group" class="form-group-lg">
<input type="text"
required
name="name"
ng-model="userfullName"
class="form-control"
placeholder="Full Name">
</div>
In the ng-submit we calling a function AddUser from the controller with a parameter formname.$valid. This submit function will be only called when form is valid or in other words all the user input of the form is valid. Keep in mind that in this case from would not be submitted if form is not valid
When we use ng-click , form will be submitted even if it is invalid. Two observations for ng-click are as follows:
We were able to submit the form even if form was not valid
For the invalid inputs, the value was set to undefined in the controller
ng-submit associated with forms, this event fires when u submit form. Where as ng-click can work without form submit event
I have one form with some fields with submit and reset button. I am using cakephp model validation to validate empty and special characters.
If I enter invalid data and submit the form, its displaying error message.After that I click on reset button,its not reset the form. Before validation error message its working fine.
My reset button code is
<input type="reset" class="uiBtn" value="Reset" name="reset"> <input type="submit" class="uiBtn" value="Save Section" name="">
Also I used jquery reset function, its also not working..
Please any one help me what is the problem???
It doesn't work because HTML Reset buttons reset the controls in a form back
to the value they were when the page first loaded. When you post back, the
PHP engine sets the values of the controls again, so the Reset would do
nothing more than change the controls back to what they were when you loaded
the page after the postback.
The only solution to this is to either do it client-side with javascript or
server-side on a postback. Just iterate through all of your controls and set
their properties appropriately.
Following Js Code would certainly work, assuming you don't have another onload event already set.
window.onload = function () {
for(var f in document.getElementsByTagName("form"))
f.reset();
}
This post might help you to reset the form after submit.