根据对象响应Angular显示复选框 [英] display checkbox based on object response Angular
问题描述
我想根据对象响应创建动态checkbox
,它应该基于这个响应创建多个checkbox
:
test.json
<预><代码>[{标题":{"serviceId":"查询服务","productCode":"JPJXXX","transactionId":"cfad2ac7c16XXX"},数据":{项目":[{"offenceType4":"","permSpeed":"110","actSpeed":"123",项目属性":{"属性 5":"","attribute4":"VQ3XXX","attribute7":"14.21.00","attribute6":"2018-03-22","attribute1":"XXXXX","attribute3":"XXXXXX",属性2":XXXXXX"},"offenceLoc":"XXXXXX","itemNo":"1","summonDate":"2018-04-02","distCode":"XXXXXX","召唤类型":"2","hbtlOffndr":"N","itemAmount":15000,"itemAttributesCount":7,"summonAmt":"150.00","offenceType1":"48","offenceCode1":"XXXXXX","offenceType2":"","offenceCode2":"","offenceType3":"","类别":"4","offenceCode3":"","offenceCode4":"","respCode":"XXXXXX"},{"offenceType4":"","permSpeed":"110","actSpeed":"123",项目属性":{"属性 5":"","attribute4":"XXXXXX","attribute7":"10.13.31","attribute6":"2018-06-16","属性 1":"XXXXXX","attribute3":"XXXXXX",属性2":XXXXXX"},"offenceLoc":"XXXXXX","itemNo":"2","summonDate":"2018-07-23","distCode":"XXXXXX","召唤类型":"2","hbtlOffndr":"N","itemAmount":15000,"itemAttributesCount":7,"summonAmt":"150.00","offenceType1":"48","offenceCode1":"XXXXXX","offenceType2":"","offenceCode2":"","offenceType3":"","类别":"4","offenceCode3":"","offenceCode4":"","respCode":"XXXXXX"}],地位":{代码":"",信息":""},附加属性":{"服务费":0,总":0,"运费":0,"外卡附加费":0,"serviceFeeTax":0,小计":0,"deliveryFeeTax":0},元数据":{计数":2}},地位":{"代码":"200","消息":"好的"}}]我想要的是基于 data.items
创建的复选框,如果 items
由 2 个数组组成,它应该创建 2 个 checkboxes
.然后可以提交选定的复选框,它需要 header.transactionId
,如果我过滤并且只有 data.items
我怎么能添加 header.transactionId
提交时.
我创建了演示 stackblitz 这就是我尝试过的:
Ts 文件
receivedSummons: SummonModel[];selectedSummon:字符串;表格:表格组;构造函数(私人查询商店:查询商店服务,私有表单构建器:FormBuilder){this.form = this.formBuilder.group({收到传票:新 FormArray([], minSelectedCheckboxes(1))});}ngOnInit() {this.getReceivedSummons();}getReceivedSummons() {this.inquiryStore.summons$.subscribe(receivedSummons => {this.receivedSummons = receivedSummons;this.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 文件
我可以使用一些指导和建议来解决这个问题.
首先在使用 FormBuilder
时尽量不要实例化 FormControl
或 FormArray
> 直接.而是使用 FormBuilder
来做到这一点.
this.form = this.formBuilder.group({收到传票:this.formBuilder.array([])});
由于您的 response
是一个 array
,您可以获得多个 receivedSummons
,其中可以包含多个 data.items
.您需要不同的表单结构来解决您的问题.
您的 addCheckboxes
函数可能如下所示.
addCheckboxes() {this.formReceivedSummons.setValue([]);this.receivedSummons.map(x => {const group = this.formBuilder.group({标头:[x.header.transactionId],项目:this.formBuilder.array([], [minSelectedCheckboxes(1)])});x.data.items.map(y => {(group.get('items') as FormArray).push(this.formBuilder.group({名称:[y.itemNo],已检查:['']}));});this.formReceivedSummons.push(group);});}
还要相应地更改 html
文件.
这里使用了 2 个 getter 来获取 receivedSummons
和 items
FormArray
get formReceivedSummons() {返回 this.form.get('receivedSummons') 作为 FormArray;}formReceivedSummonsItems(i: number) {返回 (this.formReceivedSummons.controls[i].get('items')) 作为 FormArray;}
在这里您可以找到完整的演示.
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"
}
}
]
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.
I had created demo stackblitz and this is what I had tried:
Ts File
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 File
<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.
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([])
});
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.
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);
});
}
Also change the html
file accordingly.
<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>
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.
这篇关于根据对象响应Angular显示复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!