Angular: $setPristine on Form and Checkbox Issue - javascript

I've got a form that doesn't allow you to check checkboxes on the first entry, which is very weird. It's almost like it doesn't register the click.
If however, you submit the form and try and check the same checkboxes after submitting the first form, it allows you to check the checkboxes. Why is this?
This is what my checkboxes look like:
<label ng-repeat="sector in sectors" for="{{sector}}">
<input type="checkbox" id="{{sector}}" value="{{sector}}" ng-model="newService.sectors[sector]">{{sector}}
</label>
I'm also trying to work out how to implement $setPristine on this form so it gives the form a class of .ng-pristine when submitted.
I'm very new to Angular and am slowly trying to understand how this all works.
I've set up a Fiddle here: http://jsfiddle.net/nh63w6e0/2/
Any help is appreciated. Thanks in advance!

The Problem
Using your JSFiddle example, if you look at the console while clicking in the checkbox, you'll see the error:
Cannot set property 'health' of undefined
That's because $scope.newService wasn't created, and you were trying to do something equivalent to $scope.newService['health'] = true while checking the checkbox. So, as you can see, $scope.newService was undefined.
The Solution
You should add a call to resetCreateForm to initialize your $scope.newService property.
JSFiddle (check out the last line, with the comment)
Edit:
Addressing your need to use the $setPristine, you could check this JSFiddle out.
All you have to do is add the name attribute on the form and call it as a $scope property by its name. Then you call the $setPristine() on the form property.

Related

Unable to Check Radio-button on (click) of another Radio Button: Angular Reactive Form

i wan to change the radio button checked status when user clicks on a radio button in another group.
i am trying to do it on click event, when user clicks on one Radio-button.
i am checking for the value and changing the radio-button value in another group.
i have added stackblitz problem-statement link for the same. please let me know what am i doing wrong here.
But i am unable to achieve this
please help.
// Getter for form value
this.form.controls.frequency.value = 'freq6'; // Wrong, not working
const value = this.form.controls.frequency.value; // Correct, only for read value
This syntax is only for get values, not for set.
To set values please use setter .setValue()
In your case: this.form.controls.frequency.setValue('freq6');
You can read more about it in documentation. https://angular.io/guide/reactive-forms#replacing-a-form-control-value
In order to change the value in the controller you have to use controller.setValue().
this.form.controls.frequency.setValue('freq6');
Your changeFrequency function should be like
changeFrequency(event){
if(event.target.value === "dash2"){
this.form.controls.frequency.setValue('freq6');
}
}
Demo

Creating input text field on marked checkbox in JQuery

I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!

JQuery fill the form but failed to be recognized

I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.
I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.
Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.

Jquery - SerializeArray() checkbox that is not "checked"

so I am trying to implement the Jquery .serializeArray() method to transform a form into a JSON string to send it out in a request. This works great for my form except for checkboxes and radio buttons. The only time this works properly is when they are checked. Sometimes, I need to know if they are unchecked. They still need to get serialized.
I suppose I could manually loop through the form and grab the values and build the JSON object, but that would not be optimal.
According to the Jquery documentation found here: Jquery Docs anything that fits the W3 standards for a successful control found here should get included. Unfortunately, this does not include checkboxes that are not checked. Does anyone have a work around for this behavior? Thanks in advance...
var form = document.getElementById('f');
console.log($(form).serializeArray();
That spits out the serialized form with the checkboxes that are not checked excluded...
If you really want to use checkboxes and radio buttons, have those input fields update a corresponding hidden field. That way, the hidden input will always be sent.
how about trying this, I had a similar problem, I thought unchecked checkboxes should have a value as well, here is a quick work around,
add an extra class on each checkbox on your form "cbx"
make data an array from the form with serialise
then loop through all checkboxes with a class of "cbx"
and add them to the array with a value of 0, AFTER the array has been created with (serializeArray())
when you post the data you will see the unchecked checboxes and values of 0 will get transferred with the post.
var data = $('#form').serializeArray();
$(".cbx:not(:checked)").each(function() {
data.push({name: this.name, value: '0' });
});
$.post("testpage.asp", data);
An alternative would be to use a jQuery plugin. For example, serializeJSON has the option to set the value for unchecked checkboxes like this:
$('form').serializeJSON({checkboxUncheckedValue: "false"});
In any case, it is usually best to use hidden inputs for unchecked values.
Alright, so I developed a workaround.
Basically I wrote a function to compare the original JSON object to the serialized form. As I looped through, I compared the components. If there was a discrepancy, I pulled the component off the form and manually inserted it into the JSON. I used the array.splice() method to add the missing components. Worked for all of the missing inputs.

checkbox in YUI DataTable

I'm using a column of checkboxes in a YUI DataTable, I works fine. But I haven't found a way to put a name and value attribute so I can use when the form is submitted.
Thanks in advance.
Does the API reference at http://developer.yahoo.com/yui/docs/YAHOO.widget.CheckboxCellEditor.html help?
In order to get a name and value attribute, you use a checkbox like this:
<input type="checkbox" name="the_name" value="the_value" />
In your server-side code, you would look into the POST or GET data for the name of the checkbox. If it is there, the checkbox was checked. If it isn't there, the checkbox was not checked.
http://www.w3schools.com/HTMLDOM/dom_obj_checkbox.asp
How I reed a attribute for a checkbox, if I use YUI of Yahoo. Normaly I can use "document.getElementById(objeto).checked" but with YUI not work?.

Categories

Resources