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.
Aucun commentaire:
Enregistrer un commentaire