I want to use multiple radio buttons.there are 10 questions with each question having a unique id and each question have 5 options with each option having unique id.I want to store selected values using formcontrolname. what is the best approach ??
the questions and options format is
questions:
[
{
id: 1
title: "questiontitle1"
options: [
{
id: 1,
name: "optionname1"
},
{
id: 2,
name: "optionname2"
}
]
},
{
id: 2
title: "questiontitle2"
options: [
{
id: 1,
name: "optionname1"
},
{
id: 2,
name: "optionname2"
}
]
}
]
html code is
Take a look at Form Array.
A FormArray is responsible for managing a collection of AbstractControl, which can be a FormGroup, a FormControl, or another FormArray.
A great tutorial to follow step by step.
Related
I have data from an API, like this:
{ actions: 1, created_at: "2020-11-27 18:13:50", id: 18, payment: "0.00", change: "A" }
And I need to send back the data modified by user, I am using Reactive Forms for this, I am showing the data with Angular Material tables.
I have an idea that it would be more or less like this:
this.form = fB.group({data: this.fB.array( [fB.group({here.the.group}} )
How can I create the formArray from the data I receive dynamically? The idea is to be able to edit from the table and send the new formArray as the new data
You can use setValue or patchValue, I like patchValue as it comes with fewer challenges in setting up
Lets say your data is like below
{
actions: 1,
created_at: "2020-11-27 18:13:50",
id: 18,
payment: "0.00",
change: "A",
data: [
{ id: 1, name: 'item 2'},
{ id: 2, name: 'item 3'},
{ id: 3, name: 'Item 3'}
]
}
You can implement below approach to set your form
this.form = fB.group({
actions: [''],
payment: [''],
change: [''],
data: this.fb.array([])
})
get formDataArray() {
return this.form.get('data') as FormArray
}
ngOnInit() {
this.myService.getData().subscribe(({actions, payment, change, data })=> {
this.form.patchValue({ actions, payment, change });
data.forEach(({id, name})=> {
this.formDataArray.push(
this.fb.group({id: [id], name: [name] })
)
})
})
}
I have been using the ng2-smart-table template. I could not able to found the location where the data save after click the add new button.some one can help me now.
In this table create data and show in the list the data what we are created. but the case is if we are refresh the browser , the above mentioned data not saved. then what should i do for add those data for firestore.
The DataSource of the mentioned module is simply an array or LocalDataSource object according to Documentation.
Let's take an example.
On typescript file define an array like this.
data = [
{
id: 1,
name: "Leanne Graham",
username: "Bret",
email: "Sincere#april.biz"
},
{
id: 2,
name: "Ervin Howell",
username: "Antonette",
email: "Shanna#melissa.tv"
},
// ... list of items
{
id: 11,
name: "Nicholas DuBuque",
username: "Nicholas.Stanton",
email: "Rey.Padberg#rosamond.biz"
}
];
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
},
add:{
confirmCreate:true
},
mode:'inline'
};
On template(html).
<ng2-smart-table (createConfirm)="addData($event)" [settings]="settings"
[source]="data"></ng2-smart-table>
Again on template.
addData(event){
//event.data is the newely created data
// Handle newly created data
// Shape of object is {
// id,
// name,
// username,
// email,
// }
// You must call event.confirm.resolve() to show data on table
}
Above addData(event) function is called when click ctrate confim.
I have several components that all do the same thing:
display a form (the form varies though, so the HTML differs for each)
capture the form
validate and send the form using a REST API
There are certain things I'm looking to share among the components. For example, the forms all have a list of RadioButtons with the following values:
#Input() radioList: Object[] = [
{ label: 'Unsatisfactory', value: 1 },
{ label: 'Needs Improvement', value: 2 },
{ label: 'Meets Expectations', value: 3 },
{ label: 'Exceeds Expectations', value: 4 },
{ label: 'Outstanding', value: 5 }
];
Is there any way to share stuff like this so if I want to edit that RadioList, I don't have to do it four times?
Extend class?
//property and property-level annotations (#Input) will be picked up by ancestors
export abstract class RadioListAwareComponent{
#Input() radioList: Object[] = [
{ label: 'Unsatisfactory', value: 1 },
{ label: 'Needs Improvement', value: 2 },
{ label: 'Meets Expectations', value: 3 },
{ label: 'Exceeds Expectations', value: 4 },
{ label: 'Outstanding', value: 5 }
];
}
#Component({
template: `<div>Comp1</div>`
})
export class RadioListImplComponentONE extends RadioListAwareComponent{}
#Component({
template: `<div>Comp2</div>`
})
export class RadioListImplComponentTWO extends RadioListAwareComponent{}
You can make your own factory and inject it into your controller https://docs.angularjs.org/guide/providers
I want to remove proxies fields like __initializer__: null,__cloner__: null, __isInitialized__: true, from my returned json but I have no idea.
I dont want to use * #Serializer\Exclude() because there are some more fields next to those fields.
here is a sample json:
emails: [
{
id: 1,
subject: "Mrs. Astrid Wuckert",
body: "Excepturi.",
sendCopy: false,
roles: [
{
__initializer__: null,
__cloner__: null,
__isInitialized__: true,
name: "ROLE_ADMIN"
},
{
name: "ROLE_RESELLER"
},
{
name: "ROLE_RETAILER"
},
{
name: "ROLE_CLUB_SHOP"
}
]
},
]
Thanks in advance.
Try call ignoring fields while creating normalizer:
$normalilzer->setIgnoredAttributes(["__initializer__", "__cloner__","__isInitialized__"]);
there is an option in the grid pageable.previousNext
If set to true the pager will display buttons for going to the first, previous, next and last pages. By default those buttons are displayed.
My question is: Is there a way to display only next and last buttons? If i set it false it hides all the buttons, and true display them.
Reading the source code it doesn't look like there is an option in kendo, don't know if you guy know a work around?
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 2,
previousNext: false
}
});
</script>
Thanks,
Henry
The pager link contains following classes.
k-pager-first - class on first page link
k-pager-last - class on last page link
classes on all other page links
k-pager-numbers
- data-page="2"
- data-page="3"
etc
You can user jQuery, and disable links you don't want user to use.
not very elegant but should work.