When my field becomes invalid, is there a way to fire a method in my js?
So for example, the user fails to fill out the name field, clicks submit, I want to:
console.log('they forgot');
Thanks
There is a $error object made available by AngularJS. This object contains all of the validations on a particular form and tells if they are valid or invalid.
To get access to this property, we can use the following syntax:
formName.inputfieldName.$error
Here is a jsfiddle sample
This document is a good reference for understanding form-validations using AngularJS.
Also, for dealing with custom validations, you can add your own directives. A sample of making such directives is given in the link above.
Related
In my AngularJS app I have an HTML form with some option elements, and when I change one option the other options also get changed. After reloading the page I can change individual values.
A function changeVariant is called on change and the values will be changed.
What causes this and how can I fix it?
This is the angularjs feature 2 way binding. if a scope variable is changed in controller the reference (object reference) value will also get changed in corresponding html pages. to restrict this you have to break the object reference. please check the below url to get some idea.
https://www.bennadel.com/blog/2863-breaking-direct-object-references-at-cache-boundaries-in-angularjs.htm
I am new to AngularJs and I know that I can use $dirty , $pristine, $ error in form validation. However is it necessary to explicitly create a form in
<form>..</form>
to use these properties ?
Hi since you are new to Angualar js nothing is better to start from the maker itself. As Sathish said AngularJsDocumentation is very good.
To answer your question is Yes you have to create a form explicitly because these are the properties of the form.
To understand the form better you can go to this link http://mrbool.com/the-concepts-of-angularjs-forms/29117
is it necessary to explicitly create a form
The answer to that is no.
While using a form tag is very helpful for creating sets of input tags to process as a whole (usually by sending to a server) it is not necessary for angular's purposes.
You can easily use the ng-form directive as an attribute on other tag types (not just form).
From the source code you can see that if you are using the form tag or ng-form as Element, Attribute or Class you will get the same behavior
restrict: isNgForm ? 'EAC' : 'E'
link
I have used switch-toggle inside ng-repeat. I don't know how to set default value to ng-model when you have multiple switch-toggle in your form and on form submit you need to have all the values. I am very much new to angular world and here is the Example In this example on form load the default value for switch-toggle is shown as "OFF". And if I submit form without making any change to the switch-toggle and check in browser console you can see empty model array. And on making some changes then I get the appropriate values.
So, how can I get all the values of the switch-toggle irrespective I make changes or not. As far as my angularJS knowledge is concern I guess it is related to its model. But how to do it in this case I feel I am lost.
This i believe should be model driven. You should intialize your switchModel, something like this
$scope.switchModel = {1:false,2:true,3:false };
instead of {}
I have a webform with some normal fields, but also some hidden fields which are set to Secure value (allows use of all tokens), so I am able to use tokens.
How do I pass values from JavaScript into those hidden fields so they are submitted with the form?
I tried using the %post[f1], %post[f2], and %post[f3] tokens, but I still don't know how to add those values with JavaScript.
You can use some basic jQuery for this.
$('input[name=INPUT_NAME]').val('NEW_VALUE');
To fully comply with Drupal theming, you probably want to wrap this up in a Drupal behavior:
(function ($) {
Drupal.behaviors.CUSTOMNAME = {
attach: function(context) {
$('input[name=INPUT_NAME]').val('NEW_VALUE');
}
}
})(jQuery);
...and of course change INPUT_NAME with the name attribute of the hidden input field and CUSTOMNAME with a descriptive camelcase name (e.g ChangeHiddenValuesForm).
As a final note: be sure to include this javascript file on the page of your form.
EDIT:
Sorry, I overlooked the Secure value reference.
Anyway, if you want the value to be secure then you shouldn't be altering it by Javascript as anyone can change it to whatever he or she likes through the DOM... That's why Webform implements the Secure value feature: the value does get submitted along with the form but simply won't be sent to the end user's browser and hereby disabling possible abuse. (For the record: Secure value uses the 'value' type from Drupal's Form API)
If you do want to change such a hidden value, you should opt for Hidden element (less secure, changeable via JavaScript) which already mentions its ability to be changed through Javascript and then use the Drupal behavior described above. Only if you do it like this it gets printed as a hidden input.
If you just want to add some JavaScript then use drupal_add_js(), for example in hook_preprocess_page() in a theme.
function mytheme_preprocess_page(&$vars, $hook) {
drupal_add_js(drupal_get_path('theme', 'mytheme') . '/mytheme.js');
$vars['scripts'] = drupal_get_js();
}
I'm creating a web client that works with a settings web API with angular.
There are a lot of settings and they are all optional. If I send a setting, it should be saved. Settings that are not sent should not change.
The requirement is to have one Save Changes button for all the settings.
I wonder if there is some way in Angular to implement this.
I thought about not using HTML form and collecting the data and creating an ajax request by myself but then I will lose the validation mechanism (that is working well with Angular-UI validate).
I thought about splitting the form into little forms and submiting only the forms where ng-dirty is not false, but this can cause a partial save if some requests will fail (and this is against the requirement).
Any idea?
You can check if the form or any named field is modified before submission. If the form has a name and your inputs have names like:
<form name="myForm">
<input name="input1">
</form>
In the controller you will have access to the object $scope.myForm and $scope.myForm.input1, and these objects will have a $dirty property which is true if the original value was modified by the user.
In the Angular documentation there is an example that covers ng-copy to implement a reset function.
http://docs.angularjs.org/cookbook/advancedform
During submit you could compare your starting model(master copy) to the changed/submitted object (changed copy) and only submit the changed items (or just delete those that are the same/unchanged).
Diff the copy and master with
http://blog.vjeux.com/2011/javascript/object-difference.html
This needs extra work to handle arrays.
Or convert to JSON and diff the JSON
https://github.com/benjamine/JsonDiffPatch