So I have a form with two checkboxes. When I call form.getForm().getValues() and I log the values, it retrieves checkbox values like this: if it is checked then the value looks like this - SomeCheckbox: "on", and if it's not checked than the value is not there at all. And then I encode those values into JSON and send it to ASP.NET MVC and the values ASP retrieves for these checkboxes are always false. The solution I came up with is to set the SomeCheckbox properties of the values I retrieve from form after getting form values and it works just fine, but is not there any other way ?
SOLUTION:
call form's getFieldValues() method instead of getValues()
call form's getFieldValues() method instead of getValues()
You need to add an inputValue config to the checkbox.
{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: 'anchovies'
}
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Checkbox-cfg-inputValue
Related
I am creating a dynamic form from angular in index.html using ng-repeat over an array of JSON object. On submit button, I need to pass form data into a post request in form of a map like :
{"key":value,"key":value}
The key is dynamic label generated in the form and value is the input from a text field or drop-down. Please help me. How I can create a map dynamically? You can find my code here.
I solved my problem. This was a little bit tricky to create a map from dynamic form. Code has been updated on plunker.
Step:
I declared a json object response at script.js.
Response[filed.attributeLabel] will work as a key and value will be bind when we select or enter some thing in dropdown or text filed avvording to key in scope variable.
Please look at the following jsbin
You will notice that there are two fields. One is a normal input while the other is a new field type that references exampleDirective. Please note...in my real application, these fields are pulling pulled from JSON and are not manually added to the fields array.
I set the DefaultValue on each record within the fields array. Again, these default values are being pulled from JSON.
The RegularInput field is properly displaying the default within its input field.
The DirectiveInput is not. Please look at the model and you will see that the default value was applied to the field itself and not the input field (or fields if I had multiple) within the directive.
Is there a way to make DefaultValue work in this type of situation? And if not...what would the best way to get the value that I am pulling from JSON to be placed on the directive fields?
just update your incoming json to include the "defaultValue" in the form object that gets passed to your directive. Try this: http://jsbin.com/coyuriyazu/1/edit?html,js,output
I ended up fixing my issue by passing data INTO the directive.
formlyConfig.setType(
{
name: 'dirTest1',
template: '<div directive-test checked="to.IsChecked" amount="to.CoverageAmount"</div>'
});
With this approach, I can specify IsChecked and CoverageAmount in my directive and pass the values that I need when setting up the various inputs within the directive. So, when I push this field type to my fields array, I can easily set my values like so:
var newRow = {
key: TestKey,
type: dirTest1,
templateOptions: {
CoverageAmount: 12345,
IsChecked: true
}
};
vm.fields[i].fieldGroup.push(newRow);
in the usual javascript form submit , what happens is that when i do the post the element names and values automatically are sent in the HTTP request to the server without me having to collect each one of them .
what I have noticed in angular form submits is that is not the case . based on ng-submit example I have to collect each ng-model i have in the view into my controller and I have to do that in the submit function I write .
My question
isnt there a way where I can collect everything from the view without having to refer to all of the ng-models in my controller ?
Why ?
there is this case where the form elements are dynamically drawn from a directive and its not very practical to refer to each when they are so many .
Any advice ?
It depends on app to app. If yours is a SPA then you have to make sure you use ng-submit and submit the form.
When you add dynamic elements to a form if you make sure you also add the ng-model accordingly then you dont have to worry about them. It will be part of the form submission.
I think what you can do is, all the form fields(even dynamic elements) can be maintained in an object e.g. formData and then add all the models into this object. Now in the submit method you can read all the form elements values (event the dynamic elements value) using formData object.
Whenever you add a dynamic element make sure it is added to formData object
E.g.
<input ng-model="formData.field1" type="text">
<input ng-model="formData.field" type="text">
Inside submit method you can get the form field vlaues using $.param($scope.formData)
My UI has a batch editable grid with column called Rank and fixed number of records ( say 5 records and no paging ). The field Rank has to be validated and should always input in the ascending order ( say 1,4,6 7, 9). These inputs has to be validated before submitting and would like to show in-line validation message against the edited cell.
I tried following
Using [Remote] validation attribute, but no way to pass the entire grid data.
Using OnSave client event, not sure how to add the in-line validation messages
Any suggestion on this would be greatly appreciated,
-George
Try adding this jquery.validate.unobtrusive.min.js Javascript reference in your view page. And the remote validation will exactly post all the input parameters to the action method. There you can return either true or false.
In order to pass the entire grid data using [Remote] validation attribute, you have to make the grid data in this format for each data:
<input name="col1" value="col1_Value">
The name "col1" must be match as a parameter in your controller, so that the value can be passed.
You can achieve this by doing a little trick using jquery.
I'm learning AngularJS and I have a question regarding the databinding for select elements. The databinding for textboxes works without any kind of event handling code. Once the ng-model attribute is set textbox updates when the model property changes and vice versa. There is no need for ng-change attribute.
However, for select elements we need to write functions that will be called via ng-change atribute.
Why does angularjs handle databinding without an ng-change attribute for textboxes but requires functions that will be called via ng-change attribute for select elements?
UPDATE:
Added the fiddle in the comments section. The example is from AngularJS in Action book. Click on one of the stories, change the textbox value and the model is updated. Change the selection in dropdown model is not updated.
UPDATE:
Added a new fiddle in the comments.
Thanks.
I've created a fiddle that works here - The issue is really just the dummy data here. In the original fiddle, the object created in the statuses array for {name:'Back Log'} and {name:'To Do'} are not the same (not ===) as the {name:'Back Log'} and {name:'To Do'} objects created in the dummy story objects.
To make the example work, I pass the indexed statuses into the getStories function. However I think this is really just a case of demo-induced confusion. (I've been looking at the MEAP for Angular in Action as well, and I think it could be simplified a bit like this one, that uses simple string statuses that will pass the === test
var getStories = function(statusesIndex) {
var tempArray = [
{title:'Story 00',
description:'Description pending.',
status: statusesIndex['To Do']
},
{title:'Story 01',
description:'Description pending.',
status: statusesIndex['Back Log']
}
];
return tempArray;
}
I think your confusion might be a result of the select documentation still being incorrect. (See my Disqus comment.) ng-model can and should be used with select. ng-change is optional and it just gives you a hook should you want to do something each time the selected option changes.
Normally you should use ng-options with select.
If i understood your question correctly then I think your guessing is wrong because for select boxes, you do not have to invoke ng-change event in order to fetch the selected option.
<select ng-model='select'>
<option>....</option>
<option value='one'>One</option>
<option value='Two'>Two</option>
</select>
// Your selected option will print below... without invoking ng-change
<div>You selected: {{select}}</div>
Demo: http://jsfiddle.net/jenxu/1/