I want to get selected radio button value then create an object to send to database, I have working example here https://stackblitz.com/edit/angular-1frcbc .I got what i expected object like this
{
lessonCode: 'test',
answers: [
{
questionCode : 'question-1',
optionCode : 'option-2'
},
{
questionCode : 'question-2',
optionCode : 'option-3'
},
]
}
but there is an error ERROR like
Error: Error trying to diff 'Option 2'. Only arrays and iterables are allowed
I believe there is something wrong in here
<input type="radio" id="{{option.order}}" [(ngModel)]="question.options" value="{{option.code}}" name="{{question.order}}">
can someone help me? any thoughts would be helpful
EDIT
i know that question.options can't assign to ngModel if i change it to something like option.order .I'm not getting object like what i expected above, if i change to something like that.
I'm pretty sure i need to change this code
getJsonResult() {
let answer: any;
let data = {
lessonCode: "test",
answers: this.data.questions.map(x => {
return {
questionCode: x.code,
optionCode: x.options
};
})
};
this.submitData = data;
console.log(JSON.stringify(this.submitData))
}
i accidentally change my code to something like this
return {
questionCode: x.code,
status: x.options.code
};
and in the html like this
<input type="radio" id="{{option.order}}" [(ngModel)]="question.options.code" value="{{option.code}}" name="{{question.order}}">
and it works and give me the same result, hope this will help someone
Related
I'm trying to control a checkbox by using the value property that is coming from tableData. And by default the value is true.
let newData = newRes.data.map((e) => {
return {
...e,
installmentChecked: true,
lateFeeChecked: true,
depositChecked: true,
collectionChecked: true,
};
});
setTableData(newData);
After I mapped the data, I return the input like this.
const { data, index } = props;
return(
...
<input
type="checkbox"
value={latefee}
checked={data?.lateFeeChecked}
onChange={() => onChangeCheckbox('lateFeeChecked', index,data?.lateFeeChecked)}
/>
...
And this how I handle the value of the object.
const onChangeCheckbox = (key, index,status) => {
tableData[index][key] = !tableData[index][key];
console.log(tableData[index][key], 'props key');
console.log(status, 'status');
};
The problem that I'm getting is, the checkbox won't change at all. When I click, the console says.
false 'props key'
true 'status'
Is there any problem with my code? Or maybe anyone could gimme a better way to handle a checkbox in React?
Appreciate any kind of responses, thanks before.
you need to let react know to rerender your component.
You need to use useState hook to achieve that.
It looks like you have setTableData it is not clear if that's connected to useState by the code you shared.
If it is,
you need to do this:
const onChangeCheckbox = (key, index,status) => {
setTableData({
...tableData,
[index][key]: !tableData[index][key],
});
};
const { data, index } = props;
return(
...
<input
type="checkbox"
value={latefee ? ‘true’:’’}
checked={data?.lateFeeChecked ? ‘checked’ : ‘’}
onChange={() => onChangeCheckbox('lateFeeChecked', index,data?.lateFeeChecked)}
/>
You may try this, as sometimes html doesn’t understand boolean value provided in React, and in those cases we need to provide boolean value in string.
I have tried like this from the response:
{success: true, result: {picture: "picture-1529913236852.jpg"}}
I need to get picture only from jsonstringify, Here is my code:
this.http.post('myurl', uploadData)
.subscribe(res =>{
console.log("meee"+JSON.stringify(res));
this.imageResp = JSON.stringify(res.picture) // here i cant take my picture values
});
please Help me.
You do not need JSON.stringify since its already an object,
just use
this.imageResp = res.result.picture;
I have in a component an array of objects like this:
fields = [
{ abcOptions: [ ... ], abcConfigs: [ ... ] },
{ defOptions: [ ... ], defConfigs: [ ... ] },
{ xyzOptions: [ ... ], xyzConfigs: [ ... ] }
]
In the html, I want to render all these objects to make fields for input. So something like this, and I could just do like this 3 times for the three objects above:
<ng2-selectize [options]="abcOptions" [config]="abcConfigs"></ng2-selectize>
However, to have leaner codes, I want to use ngFor for this task. Moreover, the actual array has like 10 objects, and I don't want to repeat the same code 10 times.
So I would like to attempt something like:
<div *ngFor="let field of fields">
<ng2-selectize [options]="<!--option key here-->" [config]="<!--config key here-->"></ng2-selectize>
</div>
Problem is I'm not sure how to dynamically insert the properties into the code for each iteration, since the keys are different in names. But they have some last letters that are the same, I guess there could be a way to do this. Like [options]="field[*Options]" maybe or something, I don't really know the syntax. Please help.
You could utilize Object.keys() to retrieve the array of values. This solution assumes that options is always at index 0 and config is always at index 1 in any given field object:
HTML
<div *ngFor="let field of fields">
<ng2-selectize [options]="getOptions(field)" [config]="getConfig(field)"></ng2-selectize>
<br />
</div>
TS:
getOptions(field: any): any[] {
return field[Object.keys(field)[0]];
}
getConfig(field: any): any[] {
return field[Object.keys(field)[1]];
}
Here is the example in action.
I would however recommend, if possible, to just consistent property names to avoid needing any kind of methods to extract the values. You could perhaps add an additional property to each field object to specify and utilize the abc/xyz identifies/groupings. With that property you could sort/map/reduce as much as possible needed. That way you could just do something like:
fields = [
{ id: 'abc', options: [ ... ], configs: [ ... ] }
];
<div *ngFor="let field of fields">
<ng2-selectize [options]="field.options" [config]="field.configs"></ng2-selectize>
</div>
Hopefully that helps!
Have this method in your component,
getFromFields(field: any, type: string) {
const value = Object.keys(field).find((key) => (new RegExp(type + '$')).test(key));
if (value) {
return field[value];
}
}
Use it in the template like this,
<ng2-selectize [options]="getFromFields(field, 'Options')" [config]="getFromFields(field, 'Configs')"></ng2-selectize>
For the life of me, I can't remember how I did something like this before:
Params:
fieldname: {
0 => { foo: 'bar'},
1 => { foo2: 'bar2'}
}
I've tried several variations of formname[] and formname[foo][] but all I get is internal server errors. Any help?
Ideally, I'd like to see:
some_field: {
username: { id: 'this', live: '1' },
another_name: { id: 'that', live: '0' },
}
Something tells me that's not possible though.
What it sounds like to me, is you can use a class such as
class foo_field
and make a separate array/list/enum whatever suits your best option. Assign the input to a __TEMP variable and then add it to your array. You could also gain your input through this class.
I'am trying to execute the Association example present in Data binding of Kitchensink example
(http://dev.sencha.com/ext/5.0.1/examples/kitchensink/#binding-associations) in Extjs5. It works fine for me (In my app am using the Json file for my Data part).
Now am trying to move the Customer and Order model to app/model/test/Customer.js and app/model/test/Order.js and modified my dependenciew accordingly.
My Customer Grid is loading fine for me, but on clicking of record Order gris not getting loaded into memeory.
Here am pasting my Sample code for Orders.js file for refrence
Ext.define('myApp.model.test.Order', {
extend: 'myApp.model.Base',
fields: [
{ name: 'date', type: 'date', dateFormat: 'Y-m-d' },
'shipped',
{
name: 'customer',
reference: {
parent: 'test.Customer'
}
}
]
});
In the above file i tried with name: 'customerId' as well but no result :(
Did any body got the same problem? Any help on this is highly appreciated.
Thanks in Advance
Make sure you use a requires config somewhere to be absolutely sure your model classes are all loading. Also check the docs for the reference config:
http://ext5-docs.site/#!/api/Ext.data.field.Field-cfg-reference
Looks like you might want to just try:
{ name: 'customerId', reference: 'myApp.model.test.Customer' }