我想基于对象响应创建动态checkbox
,它应基于此响应创建多个checkbox
:
test.json
[
{
"header":{
"serviceId":"inquiry-service",
"productCode":"JPJXXX",
"transactionId":"cfad2ac7c16XXX"
},
"data":{
"items":[
{
"offenceType4":"",
"permSpeed":"110",
"actSpeed":"123",
"itemAttributes":{
"attribute5":"",
"attribute4":"VQ3XXX",
"attribute7":"14.21.00",
"attribute6":"2018-03-22",
"attribute1":"XXXXX",
"attribute3":"XXXXXX",
"attribute2":"XXXXXX"
},
"offenceLoc":"XXXXXX",
"itemNo":"1",
"summonDate":"2018-04-02",
"distCode":"XXXXXX",
"summonType":"2",
"hbtlOffndr":"N",
"itemAmount":15000,
"itemAttributesCount":7,
"summonAmt":"150.00",
"offenceType1":"48",
"offenceCode1":"XXXXXX",
"offenceType2":"",
"offenceCode2":"",
"offenceType3":"",
"category":"4",
"offenceCode3":"",
"offenceCode4":"",
"respCode":"XXXXXX"
},
{
"offenceType4":"",
"permSpeed":"110",
"actSpeed":"123",
"itemAttributes":{
"attribute5":"",
"attribute4":"XXXXXX",
"attribute7":"10.13.31",
"attribute6":"2018-06-16",
"attribute1":"XXXXXX",
"attribute3":"XXXXXX",
"attribute2":"XXXXXX"
},
"offenceLoc":"XXXXXX",
"itemNo":"2",
"summonDate":"2018-07-23",
"distCode":"XXXXXX",
"summonType":"2",
"hbtlOffndr":"N",
"itemAmount":15000,
"itemAttributesCount":7,
"summonAmt":"150.00",
"offenceType1":"48",
"offenceCode1":"XXXXXX",
"offenceType2":"",
"offenceCode2":"",
"offenceType3":"",
"category":"4",
"offenceCode3":"",
"offenceCode4":"",
"respCode":"XXXXXX"
}
],
"status":{
"code":"",
"message":""
},
"additionalProperties":{
"serviceFee":0,
"total":0,
"deliveryFee":0,
"foreignCardSurcharge":0,
"serviceFeeTax":0,
"subTotal":0,
"deliveryFeeTax":0
},
"metadata":{
"count":2
}
},
"status":{
"code":"200",
"message":"OK"
}
}
]
我要的是根据data.items
创建复选框,如果items
由2个数组组成,则应该创建2个checkboxes
。然后可以提交选定的复选框,并且需要{{ 1}},如果我过滤后只得到header.transactionId
,提交时如何添加data.items
。
我创建了演示stackblitz,这是我尝试过的:
Ts文件
header.transactionId
HTML文件
receivedSummons: SummonModel[];
selectedSummon: string;
form: FormGroup;
constructor(
private inquiryStore: InquiryStoreService,
private formBuilder: FormBuilder
) {
this.form = this.formBuilder.group({
receivedSummons: new FormArray([], minSelectedCheckboxes(1))
});
}
ngOnInit() {
this.getReceivedSummons();
}
getReceivedSummons() {
this.inquiryStore.summons$.subscribe(receivedSummons => {
this.receivedSummons = receivedSummons;
this.addCheckboxes();
})
}
addCheckboxes() {
this.receivedSummons.map((i) => {
const control = new FormControl;
(this.form.controls.receivedSummons as FormArray).push(control);
});
}
submitSelectedCheckboxes() {
this.selectedSummon = this.form.value.receivedSummons
.map((v, i) => (v ? this.receivedSummons[i] : null))
.filter(v => v !== null);
console.log(this.selectedSummon)
}
}
我可以就如何解决这个问题提供一些指导和建议。
答案 0 :(得分:-1)
首先,在使用FormBuilder
时,请不要直接实例化FormControl
或FormArray
。相反,请使用FormBuilder
。
this.form = this.formBuilder.group({
receivedSummons: this.formBuilder.array([])
});
由于您的response
是array
,因此您可以获得多个receivedSummons
,其中可以包含多个data.items
。您需要使用其他表单结构来解决问题。
您的addCheckboxes
函数可能看起来像这样。
addCheckboxes() {
this.formReceivedSummons.setValue([]);
this.receivedSummons.map(x => {
const group = this.formBuilder.group({
header: [x.header.transactionId],
items: this.formBuilder.array([], [minSelectedCheckboxes(1)])
});
x.data.items.map(y => {
(group.get('items') as FormArray).push(this.formBuilder.group({
name: [y.itemNo],
isChecked: ['']
}));
});
this.formReceivedSummons.push(group);
});
}
还要相应地更改html
文件。
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroup]="summon">
<p>{{summon.value.header}}</p>
<ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
<ng-container [formGroup]="item">
<input type="checkbox" formControlName="isChecked"> {{item.value.name}}
</ng-container>
</ng-container>
</ng-container>
<div *ngIf="!summon.valid">At least one order must be selected</div>
</ng-container>
<br>
<button [disabled]="!form.valid">submit</button>
</form>
这里使用2个吸气剂来获取receivedSummons
和items
FormArray
get formReceivedSummons() {
return this.form.get('receivedSummons') as FormArray;
}
formReceivedSummonsItems(i: number) {
return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
}
Here,您可以找到完整的演示。