javascript - Checking if a record exists before displaying in an angular form

Question

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">
               

Answer 1

You need a service with a method that take the data as input and return a FormArray. FormGroup are for a fixed number of rows, and not very elegant. Here the documentation for Formarray. Here the documentation about dynamic forms and how to create the service