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.
Related
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 have a form where certain inputs have "required" attribute. I also have a button that adds form fields when clicked, but it always triggers the form validation message when the required fields are not filled out. I only want form validation to trigger for ng-submit and not ng-click. Is this possible?
If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.
The thing to note in particular is where it says
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"
when you do not want submission on specific button then define type="button". it will 100% work
Use novalidate for your form:
<form name="aForm" novalidate>
or use ng-form instead:
<div ng-form name="aForm">
Check this link for further info about form validation in AngularJS.
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 am new to angularjs.
It seems out of the box angularjs shows validation feedback in bubbles in realtime.
I've managed to find a way to show the errors on defocus.
Is there a way, however, to only present the feedback on a div at the top of my form instead of in bubbles?
The bubbles you see are HTML5 standard bubbles.
To valid entirely your form yourself, you'll have add a novalidate property on your form and handle the form validation through an ng-submit form custom function.
More info : http://docs.angularjs.org/api/ng/directive/ngSubmit
and http://docs.angularjs.org/guide/forms for custom form validation
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.