How to validate the dynamically created form using angularjs? - javascript

Actually I'm creating the form dynamically and i have done two way binding also. Now I want to do the validation.
Requirements:
If i have value in field for (eg. Name: Raja). If edit that value using $watch or $dirty we can check that modified or not. The same thing I want to get reverse also. Suppose I edited the value Raja to Raj and later again i'm adding the 'a' means Raja. If i give previous value again the status $dirty i should get false.
How can do this thing for whole form rather than giving each and every field.
Please help me anyone on this.
Here is my Plunker for simple example.

you should use something like $setPristine()
http://plnkr.co/edit/1LJ5alREMhFXOqO8ZWbj?p=preview

Related

How to get both check box values and radio button values in angular.js

My demo https://embed.plnkr.co/R4mdZr/
I am new to angular as I mentioned I want to get both checkbox true values and radio button values ..
There is a condition if ingredients minimum value is equal to one means it will show as radio or else checkbox .
How to get those values?
You should use ng-model when you're dealing with inputs. I'm not sure what values you want in your model, but you would typically use the ng-value directive here to assign a certain property, or perhaps the whole object to your ng-model.
For example
ng-value="get_ing_n"
Would assign the complete object to your model when you select a radio.
ng-value="get_ing_n.ingredientName"
Would bind the ingredientname.
I forked your plunker to demonstrate this. Beware however that there are some ng-init's present to format the model. It is generally not considered a good practice to put this logic into the view, so it's best to just use this as a reference.
If you want to apply some additional logic when selecting a checkbox/radio button, you can use the ng-change directive where you can call a function on your controller on model changes.

Angular send only changed fields of model or Replicate model with change

I prepared the form through angular.But when I need to submit the form so how can I send only all changed field or selected option values.
Need Some thing which works in all Scenario of input form fields.
DEMO: demo for ref.
on click of save how can i get it something like below one
{"list":[{"selectedOption":{"id":[]}}],"active":true,"chk_list":[{"selectedOption":{"id":["2","3"]}}],"name":"ssss"}
If you want the object to be returned to have only specific fields, then the result object should be different from the "myData" object, that you are using to actually display all the possible options to the user, etc.
Try this : http://jsfiddle.net/tc7dhep3/
I have created another variable
$scope.result
that contains the info to be sent on save button click.
The $dirty property for input elements tell if the user interacted with this, you can use this property to say which field was modified.
frm.name.$dirty
Angular doc: input - directive in module ng
You can combine this with ng-change or ng-submit to build the post object
Exemple: DEMO Forked from yours

AngularJS - Bind input to value with filter and update it

I have an input bound to an object property and with a filter applied to it.
<input value="{{object.field | filter}}">
The problem is that if I programmatically change object.field, the value displayed inside the input doesn't change, however in the DOM Inspector I see the correct (new) value. I verified to digest/apply the changes to the scope and the object.field variable does change correctly, the issue seems to be only in the input displayed value.
I cannot provide an example since there's too much code involved.
Does anyone know where I should look for errors??
No need to set value in that way. ng-model takes care of it.
Valid syntax is:
<input ng-model="object.field">
For filtering you can look at this answer:
Using angularjs filter in input element
I think you should use ng-model to bind your data into input box instead {{expression}}

how do I grab the value of a checkbox using javascript?

I have a javascript that needs to grab the value of a checkbox when its checked and ignore its value when its not checked.
Right now i'm grabbing the value of the checkbox with:
$("input[name='tos']:checked").val()
It works when you check the box and submit the form, but if you uncheck it and resubmit the form the old value of "agree" is given. So i'm wondering how to I grab the value of a checkbox only when its checked?
http://jsfiddle.net/dqy5H/
Here is an example fiddle. Sorry for the bad first response.
Don't forget that unchecked checkboxes don't travel in form submission. Your code is ok, but you may have the old value stored on server side.
A workaround is tht you could have an <input type="hidden"/> that changes its value when you check/uncheck the checkbox, and read this hidden on the server. Or simply, ask if the checkbox arrived to the server, if it didn't it means it was unchecked.
Hope this helps. Cheers
Two things, in order of least to most helpful :)
A checkbox should never return a value of "agree"! I'm hoping you misspoke.
I'm not sure the jQuery selector you used there is actually valid. As the other fellow mentions, it is but it only ever sets the value when it's checked. Oof, my bad. In any case, I'd still recommend giving the checkbox an ID/unique class, and then do:
var checked = $('#toscheckbox').val();
You can add IDs without messing up the form's submission data, and I prefer them - names are so fiddly.
Try giving it an id and calling .is(':checked') like in this article to see if it is checked or not.
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html

get radio box value in jquery

Am I under the wrong impression that jquery or JS can retrieve the values of radio buttons in a form? The reason i ask is because in my code the script i use to check for all fields in a form, does not seem to recognise the value in id="contact2" in the form, which is a radio group. I have posted my code at jsfiddle.net and would appreciate some feedback as to how I can correct this. Many thanks
Fiddle: http://jsfiddle.net/xGrb9/
You need to do it like this:
$('input:radio[name=bar]:checked').val();
Because of how radio buttons are checked/unchecked and their values are stored. (from the jQuery docs). You also need to make sure that the radio buttons have different IDs, which is a classic gotcha.
Finally, when testing if a radio button has not been selected at all, make sure to test against undefined and not an empty string for compatibility across browsers.
EDIT: looked at your code, and you need to do two things:
1. Change IDs of the buttons, to something like "contact2a" and "contact2b" so they are unique.
2. Change your var customer2 = line to var contact2=$("input[name=contact2]:checked").val();
Change this line:
var contact2=$("#contact2").val();
to:
var contact2=$('input[name="contact2"]:checked').val();
You need the checked because otherwise it finds both inputs.
Also, technically, all IDs should be unique, ie, not used on 2 elements on the page.
You should be able to use .val()
See this: http://api.jquery.com/val/
Both of your radio buttons have the same ID. That doesn't work in HTML. You'll have to refer to the buttons separately and select the one that is checked.
You can simply call
$("[name=contact2]:checked").val()

Categories