Needed some help with AngularJS as I'm new to it.
I have a form which has a button to display a dialog box, and then once that dialog box pops up, user must submit the form from the button on the Dialog box.
But currently if the user hits enter in a textBox before the dialog box has been opened, the form gets submitted without the dialog generating.
The button on the main form looks like this :
<button type="button" class="xyz xyz-one" ng-Click="popDialog()">
And the button on the dialog which finally submits the form looks like this :
<button type="submit" class="xyz xyz-one">
Is there any way that on the UI when the user hits enter, the form is blocked from automatic submission and only the dialog pops up?
On each of the textfields in your form, add this directive:
ng-keydown="preventFormSubmission($event)"
Then in your controller do the following:
$scope.preventFormSubmission = (event) => {
// Keycode 13 is the enter button
if (event.keyCode === 13) {
event.preventDefault()
}
}
$event is the object which holds all the data about the event that just happened (the key being pressed).
Calling event.preventDefault() will stop the form from automatically being submitted.
Change the button in the main form to
<button type="button" ng-click="submit()">
Related
New to Angularjs. In a form i have a button and clicking upon, it would call a function with formname in its input:
<button ng-show="!ask" id="id1" class="btn btn-primary save" ng-click="checkfunction(claim.ProviderJSON,claimform)" style="margin-right: 60px;">Add</button>
The checkfuntion is below:
$scope.checkfunction = function(obj,claimform) {
console.log(claimform);
console.log($scope.claimform.svcDateFrom.$pristine);
$scope.claimform.svcDateFrom.$pristine='true';
$scope.claimform.svcDateFrom.$setPristine();
$scope.claimform.svcDateFrom.$setPristine('true');
claimform.svcDateFrom.$pristine='true';
claimform.svcDateFrom.$setPristine();
claimform.svcDateFrom.$setPristine('true');
console.log(claimform);
console.log(claimform.svcDateFrom.$pristine);
console.log($scope.claimform.svcDateFrom.$pristine);}
Now when i am clicking the "Add" button, and check on console.log(claimform); (before updatinng pristine) the claim form has as $pristine:false
but console.log($scope.claimform.svcDateFrom.$pristine); is coming as true.
I am not able to update the pristine values. I need to keep it true and dirty as false after clicking on Add button. I tried different methods but all in vain.
Thanks in advance!!
I've made a codesandbox to showcase the behaviour: https://codesandbox.io/s/musing-dan-ejyuv
I have two buttons in my form one is forgot password and other is the submit button itself. When I enter values and press enter it registers the forgot password button for no reason even when the submit button has input type="submit". How can I get rid of this behaviour and prevent it to go on the forgot password page but instead it should be submitting the form.
You need to add the type=button to the forgot passwrod button. As per MDN docs for button mentions
If this attribute is not set, the <button> is associated with its ancestor <form> element, if any.)
Once you add the type=button to the forgot password, it'll not behave as submit button.
<button
type="button"
onClick={() => {
setForgotPassword(true);
}}>
Forgot Password?
</button>
Updated Sandbox link
How to validate a form in angularjs Form with a normal button and not with submit button. I want to have same functionality that I got with the submit button. I am new to angularjs and I am not able to figure out how to do this.
Use ng-click in your button so that it triggers function, in this case onClick(), in your controller.
<button type="button" ng-click="onClick()" >Normal Button</button>
And in the controller, you code your validation there.
$scope.onClick = function () {
// Validation
// then the rest
};
I have
var x = angular.element(document.getElementById('campito'[0]
.attributes[2].submit; that show ng-submit="submit(campito)"
How can I trigger the submit from the controller
I have a form:
<form name="campito" id="campito" ng-submit="submit(campito)">
</form>
and a button outside de form:
<button type="submit" class="btn btn-primary sh-depth-1" form="campito" ng-disabled="!esAdmin || isLoad">
<strong>Guardar</strong>
</button>
Is angular 1.4.4, in chrome the button works fine, but in IE9 don´t work, I tried to change the type attribute to ng-attr-type in the button, because it is a bug, but it does not work either. Therefore what I can think of is to create a function and trigger it from the same button and within this function trigger the submit, I already get inside the function to obtain the object of the form, but I can not trigger it.
With:
var x = angular.element(document.getElementById('campito'))[0];
obtain the complete form
With:
var x = angular.element(document.getElementById('campito'))[0].attributes[2];
The ng-submit attribute.
After that I could not.
Angular seems to be firing validation messages when ANY button within form $scope is clicked. Is there a directive that can be applied to a <button> that will prevent this?
All elements are considered to be of type submit by default.
use this to prevent form submissions:
<button type="button">