Hi i am using Angular8 reactive forms. In this, i need to bind data with respect to the array name given in the output. Initially i was getting all response as one array of objects but now, it has got differenciated with headers, so i need to bind data accordingly.
i have attached demo with all necessary codings.
TS output:
public data = {
businessLineGroup: {
'Builders Risk': [
{
id: 65,
prospectCode: 99000130,
agentCode: null,
competitorId: 32,
policyTypeId: 244,
competitorName: 'w4-ALL RISKS-DIST.OF COL.-Builders Risk',
quoteCount: '5454',
policyCount: '25',
writtenPremium: '56.00',
isTrack: true,
isEdit: false,
},
],
'Commercial Monoline': [
{
id: 64,
prospectCode: 99000130,
agentCode: null,
competitorId: 31,
policyTypeId: 245,
competitorName:
'UNITED HOME INS CO-ALL RISKS-ARKANSAS-Commercial Monoline',
quoteCount: '4566',
policyCount: '24',
writtenPremium: '45.00',
isTrack: true,
isEdit: false,
},
{
id: 69,
prospectCode: 99000130,
agentCode: null,
competitorId: 37,
policyTypeId: 245,
competitorName: 'ug fixes-AMWINS-DELAWARE-Commercial Monoline',
quoteCount: '524',
policyCount: '62',
writtenPremium: '564.00',
isTrack: false,
isEdit: false,
},
],
'Commercial Package': [
{
id: 67,
prospectCode: 99000130,
agentCode: null,
competitorId: 34,
policyTypeId: 246,
competitorName:
'Nationwide Mutual Insurance Company-AMWINS-DELAWARE-Commercial Package',
quoteCount: '452',
policyCount: '52',
writtenPremium: '45.00',
isTrack: false,
isEdit: false,
},
],
},
};
binding method:
private getOpportunitiesList() {
this.opportunityList = Object.keys(this.data.businessLineGroup);
if (this.opportunitesx && this.opportunitesx.controls) {
this.opportunitesx.controls = [];
}
let amount: any;
for (let i = 0; i < this.opportunitesx.length; i ) {
if (this.opportunityList[i].quoteCount) {
let a = new Intl.NumberFormat().format(
this.opportunityList[i].quoteCount
);
this.opportunityList[i].quoteCount = a;
}
this.opportunityList[i].isEdit = false;
}
for (let lang of this.opportunityList) {
let group = this.createOpportunityInformation();
group.get('competitorId').setValue(lang.competitorId);
group.get('competitorId').disable();
group.get('quoteCount').setValue(lang.quoteCount);
group.get('quoteCount').disable();
group.get('policyCount').setValue(lang.policyCount);
group.get('policyCount').disable();
group.get('writtenPremium').setValue(lang.writtenPremium);
group.get('writtenPremium').disable();
group.get('isTrack').setValue(lang.isTrack);
group.get('isEdit').setValue(false);
group.get('isTrack').disable();
group.get('id').setValue(lang.id);
group.get('id').disable();
this.opportunitesx.push(group);
}
this.preventOpportunityEmpty();
}
HTML:
<div
[formGroup]="opportunitiesForm"
[ngClass]="{ scroll: opportunityList?.length > 3 }"
id="panel1"
*ngIf="opportunitiesForm"
>
<table id="searchList">
<thead>
<tr>
<th scope="col"> </th>
<th
scope="col"
*ngFor="let field of opportunityListDetails"
>
{{ field.displayName }}
</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody formArrayName="opportunitesx">
<tr
*ngFor="
let item of opportunitiesForm.get('opportunitesx')['controls'];
let i = index
"
[formGroupName]="i"
>
<td >
<span *ngIf="opportunitesx.controls[i]['controls'].competitorId.value"
><i
(mouseenter)="onOpenCompetitorDetails(item)"
id="competitorInfo"
></i
></span>
</td>
<td >
<select
formControlName="competitorId"
[ngClass]="{
'is-invalid':
submitted &&
opportunitesx.controls[i]['controls'].competitorId.errors
}"
id="competitorId"
>
<option disabled="" value="">Choose Competitor</option>
<option
*ngFor="let competitor of competitorDropdown"
[value]="competitor.id"
title="competitor.value"
>
{{ competitor.value }}
</option>
</select>
<div
*ngIf="
submitted &&
opportunitesx.controls[i]['controls'].competitorId.errors
"
>
<div
*ngIf="
opportunitesx.controls[i]['controls'].competitorId.errors
.required
"
>
Competitor is required
</div>
</div>
</td>
<td>
<input
type="text"
placeholder="Quote Count"
formControlName="quoteCount"
maxlength="4"
/>
</td>
<td>
<input
type="text"
placeholder="Policy Count"
formControlName="policyCount"
allowNumberOnly
maxlength="4"
/>
</td>
<td >
<input
type="text"
placeholder="Written Premium"
formControlName="writtenPremium"
/>
</td>
<td>
<input
type="checkbox"
style="width: auto;"
formControlName="isTrack"
/>
</td>
<td >
<button
title="Close"
(click)="clearOpportunity(i, opportunitesx.controls[i]['controls'])"
*ngIf="
opportunitesx.controls[i]['controls'].isEdit.value ||
opportunitesx.controls[i]['controls'].id.value == 0
"
>
Close
</button>
<button
title="Edit"
(click)="
editOpportunityDetails(i, opportunitesx.controls[i]['controls'])
"
*ngIf="
!opportunitesx.controls[i]['controls'].isEdit.value &&
opportunitesx.controls[i]['controls'].id.value > 0
"
>
Edit
</button>
<button
title="Save"
type="button"
*ngIf="
opportunitesx.controls[i]['controls'].isEdit.value ||
opportunitesx.controls[i]['controls'].id.value == 0
"
[disabled]="!this.opportunitesx.controls[i].dirty"
(click)="saveOpportunityDetails(i)"
>
Save
</button>
<button
title="Delete"
*ngIf="opportunitesx.controls[i]['controls'].id.value > 0"
[disabled]="
opportunitesx.controls[i]['controls'].isEdit.value &&
opportunitesx.controls[i]['controls'].id.value > 0
"
type="button"
(click)="
deleteOpportunityDetails(i, opportunitesx.controls[i]['controls'])
"
>
Delete
</button>
</td>
</tr>
</tbody>
</table>
[![Image][2]][2]
CodePudding user response：
You are iterating over the wrong variable, opportunityList is not an array, you need to fetch nested keys and loop over it. To show header name you can add two controls in your formGroup and set values like below:
const dataArray = [];
let obj: any = {};
Object.keys(this.opportunityList.businessLineGroup).forEach((item,index) => {
this.opportunityList.businessLineGroup[item].forEach((subItem,subIndex) => {
obj = subItem;
obj.header = item;
if(subIndex == 0){
obj.showHeader = true;
}else {
obj.showHeader = false;
}
dataArray.push(obj);
});
});
loop over this array to generate form control.
for (let lang of dataArray){
}
Link to Demo
PS: I have updated the link to demo. To show headers you will have to remove table. For your edit/new functionality you can do the similar changes.