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.
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 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>
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
};
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?
I am trying to create an xeditable form as demonstrated here: https://vitalets.github.io/angular-xeditable/#editable-form.
I have followed the instructions exactly but my form is not working. I want to save a resource, but when I click the Edit button, which should display the form, it seems to skip the editing stage and immediately triggers the saveResource function - which should only happen when the form gets saved.
I've compared my code to the documentation again and again and can't work out what I am doing wrong.
HTML
<form editable-form name="editResourceForm" onaftersave="saveResource()">
<p>
<strong editable-text="resource.title" e-name="title">
{{resource.title}}
</strong>
</p>
<div class="col-xs-12 col-sm-4">
<button ng-click="editResourceForm.$show()" ng-show="!editResourceForm.$visible">Edit</button>
<!-- buttons to submit / cancel form -->
<span ng-show="editResourceForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="editResourceForm.$waiting">Save</button>
<button type="button" class="btn btn-default" ng-disabled="editResourceForm.$waiting" ng-click="editResourceForm.$cancel()">Cancel</button>
</span>
</div>
</form>
JS
app.controller('Ctrl', function($scope, $filter) {
$scope.resource = {
title: 'awesome resource'
};
$scope.saveResource = function() {
console.log("Save resource");
}
});
JSFIDDLE HERE
You can see that it is trying to save the form, because every time the Edit button is clicked, the console logs "Save resource". This should not happen when the edit button is clicked.
#ckosloski answered this on Github:
I think it's because your edit button does not specify a button type.
By default, the button type is submit. So you are clicking on the
button and it's submitting the form since it's a submit button. Try
adding type="button" to your edit button.
Adding this solved it, as you can see from the updated JSFiddle.