基于对象响应角度显示复选框 [英] display checkbox based on object response Angular
问题描述
我想基于对象响应创建动态的checkbox，它应基于此响应创建多个checkbox:
I want to create dynamic checkbox based on object response,It should create multiple checkbox based on this response:
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.然后可以提交选定的复选框，并且需要header.transactionId，如果我过滤并仅有data.items，提交时如何添加header.transactionId.
what I want is checkbox to be created based on data.items if items consist of 2 arrays, it should create 2 checkboxes.then selected checkboxes can be submit and it need header.transactionId, if I filter and only got data.items how could I add header.transactionId when submit.
我已经创建了演示 stackblitz ，这就是我尝试过的:
I had created demo stackblitz and this is what I had tried:
Ts文件
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)
}
}
HTML文件
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<label formArrayName="receivedSummons" *ngFor="let summon of form.controls.receivedSummons.controls; let i = index">
<input type="checkbox" [formControlName]="i">
</label>
<div *ngIf="!form.valid">At least one order must be selected</div>
<br>
<button [disabled]="!form.valid">submit</button>
</form>
我可以就如何解决这个问题使用一些指导和建议.
I could use some guidance and suggestion on how to solve this.
推荐答案
首先，在使用FormBuilder时，请尝试不要直接实例化FormControl或FormArray.而是使用FormBuilder这样做.
First of all when using FormBuilder try not to instantiate FormControl or FormArray directly. Instead use FormBuilder to do so.
this.form = this.formBuilder.group({
receivedSummons: this.formBuilder.array([])
});
由于您的response是array，因此您可以获得多个receivedSummons，其中可以包含多个data.items.您需要使用其他表单结构来解决问题.
As your response is an array you can get multiple receivedSummons which can contain multiple data.items. You need a different form structure to solve your issue.
您的addCheckboxes函数可能看起来像这样.
Your addCheckboxes function might look like this.
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
Here 2 getters were used to get the receivedSummons and items FormArray
get formReceivedSummons() {
return this.form.get('receivedSummons') as FormArray;
}
formReceivedSummonsItems(i: number) {
return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
}
在这里，您可以找到完整的演示.
Here you can find the full demo.
这篇关于基于对象响应角度显示复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
