I have a requirement to display 4 records out of an unknown number record on an Angular screen. In the sample data I am using there are 53 records so if I am only working with the sample data, there is no need if Data is present when I am loading the data. However in the real world there could be 0 records that are returned.
I have come up with one way of potentially doing this, but what I have come up with feels like a brute force method rather then something that is elegant and modern. The relevant code that I have come up with is shown below.
snippet from .ts file
constructor(
private repoService: UserApiService,
public dialogRef: MatDialogRef<OrphansComponent>,
public dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) public data: any
) {
const fb = new FormBuilder;
this.orphanForm = fb.group({
naPartNo: null,
altPartNo: null,
partNo: null,
rev: null,
partStatusId: null,
serialNo: null,
lotNo: null,
asBuiltQty: null,
fltCrit: null,
comments: null
})
this.orphanForm1 = fb.group({
naPartNo1: null,
altPartNo1: null,
partNo1: null,
rev1: null,
partStatusId1: null,
serialNo1: null,
lotNo1: null,
asBuiltQty1: null,
fltCrit1: null,
comments1: null,
})
}
setData(){
if(this.dataSource.data[0].fltCrit == 'Y'){
this.dataSource.data[0].fltCrit = true;
} else {
this.dataSource.data[0].fltCrit = false;
}
const fb = new FormBuilder;
if(this.dataSource.data[0] !== undefined){
console.log('Item 0 in array');
this.orphanForm = fb.group({
naPartNo: new FormControl({ value: this.dataSource.data[0].naPartNo, disabled: false}),
altPartNo: new FormControl({ value: this.dataSource.data[0].altPartNo, disabled: false}),
partNo: new FormControl({ value: this.dataSource.data[0].partNo, disabled: false}),
rev: new FormControl({ value: this.dataSource.data[0].asBuiltCl, disabled: false}),
partStatusId: new FormControl({ value: this.dataSource.data[0].partStatusId, disabled: false}),
serialNo: new FormControl({ value: this.dataSource.data[0].serialNo, disabled: false}),
lotNo: new FormControl({ value: this.dataSource.data[0].lotNo, disabled: false}),
asBuiltQty: new FormControl({ value: this.dataSource.data[0].asBuiltQty, disabled: false}),
fltCrit: new FormControl({ value: this.dataSource.data[0].fltCrit, disabled: false}),
comments: new FormControl({ value: this.dataSource.data[0].comments, disabled: false}),
})
};
if(this.dataSource.data[1] !== undefined){
console.log('Item 1 in array');
this.orphanForm1 = fb.group({
naPartNo1: new FormControl({ value: this.dataSource.data[1].naPartNo, disabled: false}),
altPartNo1: new FormControl({ value: this.dataSource.data[1].altPartNo, disabled: false}),
partNo1: new FormControl({ value: this.dataSource.data[1].partNo, disabled: false}),
rev1: new FormControl({ value: this.dataSource.data[1].asBuiltCl, disabled: false}),
partStatusId1: new FormControl({ value: this.dataSource.data[1].partStatusId, disabled: false}),
serialNo1: new FormControl({ value: this.dataSource.data[1].serialNo, disabled: false}),
lotNo1: new FormControl({ value: this.dataSource.data[1].lotNo, disabled: false}),
asBuiltQty1: new FormControl({ value: this.dataSource.data[1].asBuiltQty, disabled: false}),
fltCrit1: new FormControl({ value: this.dataSource.data[1].fltCrit, disabled: false}),
comments1: new FormControl({ value: this.dataSource.data[1].comments, disabled: false}),
})
};
}
snippet from .html file
<div [formGroup]="orphanForm">
<fieldset class="grid-item">
<table>
<tr>
<td class="dataLabel" style="width: 80px;">
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
NA Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Alt Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Part No
</td>
<td class="dataLabel" style="width: 80px;">
Rev
</td>
<td class="dataLabel" style="width: 80px;">
Status
</td>
</tr>
<tr>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="naPartNo"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="altPartNo"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="partNo"/>
</mat-form-field>
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="rev"/>
</mat-form-field>
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="partStatusId"/>
</mat-form-field>
</td>
</tr>
<tr>
<td class="dataLabel" style="width: 80px;">
Serial No
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="serialNo"/>
</mat-form-field>
</td>
<td class="dataLabel" style="width: 80px;">
Lot No
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="lotNo"/>
</mat-form-field>
</td>
<td class="dataLabel" style="width: 80px;">
Qty
</td>
<td style="width: 80px;">
<mat-form-field appearance="fill" style="width: 75px;">
<input matInput type="text" formControlName="asBuiltQty"/>
</mat-form-field>
</td>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-checkbox formControlName="fltCrit" labelPosition="before" class="dataLabel">Flight Critical</mat-checkbox>
</td>
</tr>
<tr>
<td class="dataLabel" style="width: 80px;">
Comments
</td>
<td style="width: 640px;" colspan="8">
<mat-form-field appearance="fill" style="width: 630px;">
<input matInput type="text" formControlName="comments"/>
</mat-form-field>
</td>
</tr>
</table>
</fieldset>
</div>
<div [formGroup]="orphanForm1">
<fieldset class="grid-item">
<table>
<tr>
<td class="dataLabel" style="width: 80px;">
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
NA Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Alt Part No
</td>
<td class="dataLabel" style="width: 160px;" colspan="2">
Part No
</td>
<td class="dataLabel" style="width: 80px;">
Rev
</td>
<td class="dataLabel" style="width: 80px;">
Status
</td>
</tr>
<tr>
<td style="width: 80px;">
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="naPartNo1"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">
<mat-form-field appearance="fill" style="width: 150px;">
<input matInput type="text" formControlName="altPartNo1"/>
</mat-form-field>
</td>
<td style="width: 160px;" colspan="2">