Need help in display data to a table using reactive angular form

Question

Json Data :

           "stocks": {
              "stock": [
                 {
                    "beginDate":"20190531",
                    "endDate":"20190619",
                    "issuedShares":"true",
                    "totalAssets":"true", 
                        [
                             {
                                "stockClass": "true",
                                "parValue": "0.0001",
                                "numberOfShares": "8000000",
                                "stockDescription": "COMMON"
                             }
                        ]
                 },
                 {
                    "beginDate":"20190619",
                    "endDate": ,
                    "issuedShares":"true",
                    "totalAssets":"true", 
                    [
                             {
                                "stockClass": "true",
                                "parValue": "0.0001",
                                "numberOfShares": "9000000",
                                "stockDescription": "COMMON"
                             },
                             {
                                "stockClass": "true",
                                "parValue": "0.0001",
                                "numberOfShares": "1600000",
                                "stockDescription": "PREFERRED"
                             }
                    ]
                 }
              ]
           }

Need to display to a table using Angular reactive forms in this fashion Tabular Data The way i have done is template driven which is making it difficult to add dynamic validations like max to the Inputs. Any help would be much appreciated.

ngOnInit(): void {

this.buildForm(this.orderInfo.submissionDto.submissionFilingDto.taxDataRequestResponse.taxDataField.stocksField);

}

buildForm(data: stock[]) {

this.taxRecalcForm = this.formBuilder.group({

jedis: this.formBuilder.array([]),

jedis1: this.formBuilder.array([]),

});

this.initJedis(data);

}

initJedis(data: stock[]) {

const control = this.taxRecalcForm.controls['jedis'];

// this.data.forEach(x => {

// control.push(this.initJedi(x));

// });

for(let x of data)

{

let v = this.initJedi(x);

control.push(v);

}

}

initJedi(jedi?: stock): FormGroup {

let jedi1 = jedi;

const control1 = this.taxRecalcForm.controls['jedis1'];

// jedi.stockDetail[0].forEach(x => {

// control1.push(this.initJedi1(x));

// });

for(let x of jedi.stockDetailField)

{

//for(let y of x.stockDetail){

var i =this.initJedi1(x);

control1.push(i);

//}

}

return this.formBuilder.group({

beginDate: [jedi.beginDateField || ''],

endDate: [jedi.endDateField || ''],

totalShares: ["totalShares" || ''],

totalAssets: ["totalAssets" || ''],

assetDate: ["assetDate" || ''],

});

}

initJedi1(jedi1: stockDetail): FormGroup {

let v = jedi1;

return this.formBuilder.group({

parValue: [v.parValueField || ''],

stockDescription: [v.stockDescriptionField || ''],

numberOfShares: [v.numberOfSharesField || ''],

sharesIssued: ["sharesIssued" || '']

});

}

HTML

Begin Date End Date Stock Details Total Shares Issued Gross Assets Asset Date Stock Class No. Of Shares par Value/Share Issued Shares