问题
I am doing dynamic form by referring this link click here and its working for all textarea, multi select and date type. But for checkbox not working while submitting the form I am getting the out put like the below
{"name":"df","food":"Pizza","description":"zx v","color":["Red"],"incidentdate":"2017-09-22","options":true,"gender":"Female","submit":null}
In this how I can identify which checkbox is selected? here just showing "options":true
I have tried in the below format but its not working.
template: `<div
class="dynamic-field form-input"
[formGroup]="group">
<label>{{ config.label }}</label>
<span *ngFor="let option of config.options">
<input type="checkbox" [formControlName]="config.name" value="{{option}}" />{{option}}
</span>
</div>`
Please let me know am I doing anything wrong?
Here is the config
this.config =
{
"label" : "Title",
"type" : "input",
"name" : "title"
},
{
"label" : "Status",
"type" : "select",
"name" : "status",
"options" : [
"Accepted",
"Rejected",
"Pending",
"Complete"
],
"placeholder" : "Select an option"
},
{
"label" : "What options?",
"type" : "checkbox",
"name" : "question",
"options" : [
"Option D",
"Option E",
"Option F"
]
},
{
"label" : "Incident Date",
"type" : "date",
"name" : "incidentdate"
},
{
"label" : "Comments",
"type" : "textarea",
"name" : "comments"
},
{
"label" : "Description",
"type" : "textarea",
"name" : "descriptions"
},
{
"label" : "Is it good?",
"type" : "radio",
"name" : "gender",
"options" : [
"Male",
"Female"
]
},
{
"label" : "Who is responsible?",
"type" : "multiselect",
"name" : "responsible",
"options" : [
"Manager",
"Supervisor",
"Site-Supervisor"
]
},
{
"label" : "Submit",
"type" : "button",
"name" : "submit"
}
Thank you
回答1:
When i deal with group of checkboxes i prefer creating FormArray of group to handle it.
For example if we want to declare array of checkbox with the following values:
[
"Option D",
"Option E",
"Option F"
]
We can create FormArray
of FormGroup
s like:
dynamic-form.component.ts
createControl(config: FieldConfig) {
...
if(config.type === 'checkbox') {
return this.fb.array(
config.options.map(x => {
return this.fb.group({
name: x,
value: value ? value.indexOf(x) > - 1 : false
})
}));
}
then template should be changed to
form-checkbox.component.html
<div class="dynamic-field form-input" [formGroup]="group">
<ng-container [formArrayName]="config.name">
<label>{{ config.label }}</label>
<span *ngFor="let option of config.options; let i = index" [formGroupName]="i">
<input type="checkbox" [name]="config.name" formControlName="value" />{{option}}
</span>
</ng-container>
</div>
When we'll print value of our form it will look like:
{
"question": [
{
"name": "Option D",
"value": true
},
{
"name": "Option E",
"value": true
},
{
"name": "Option F",
"value": false
}
]
}
This way we can easily manipulate the values we want to pass to the server during submitting:
handleSubmit(event: Event) {
event.preventDefault();
event.stopPropagation();
const result = {...this.value};
Object.keys(result).forEach((key, index) => {
if(this.controls[index].type === 'checkbox') {
result[key] = result[key].filter(x => x.value).map(x => x.name);
}
})
this.submit.emit(result);
}
in this case it will submit:
{
"question": [
"Option D",
"Option F"
]
}
in some other cases we would want to pass id or something complex value.
See also Stackblitz Example
来源:https://stackoverflow.com/questions/46357561/how-to-create-component-template-for-check-boxes-in-angular-dynamic-form