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
};
Related
I using ui bootstrap tooltip plugin with something like this:
<button type="button" uib-tooltip="new item">
new item
</button>
<button ng-disabled="vm.testDisabled()">
search
</button>
angular.module('rgh').controller('CourseController', CourseController);
function CourseController () {
function testDisabled() {
console.log('testDisabled called')
return false;
}
}
but the problem is that when i hover on new item button, i see the testDisabled called logs in chrome console, i think its inappropriate behavior from uib-tooltip.
how can i resolve this problem?
It's not inappropriate, it's how angular works! when you pass over your button and the tooltip shows the digest loop runs, because you've provided your ngDisabled with a function, that function will run on each digest cycle (even when it is not needed) because it's returned result will be used to tell angular if it should disable the input or not!!
To avoid this, pass ngDisabled with a variable that will be changed in your controller on certain conditions
<button ng-disabled="vm.isTestDisabled">
search
</button>
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.
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()">
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
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">