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!!
Related
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
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()">
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.