My goal is to create a form array within an array for master detail use. I have defined the structure as follows:
agreementForm: FormGroup;
agrArr: any[] = [];
constructor() {
this.agreementForm = new FormGroup({
serviceArr: new FormArray([])
});
}
submitAgreement() {
const data = this.agreementForm.value;
this.agrArr.push(data);
}
submitForm() {
console.log(this.agrArr);
for(i=0;i<this.agrArr.length;i++) {
for(j=0;j<this.agrArr[i].serviceArr.length;j++){
console.log(this.agrArr[i].serviceArr[j]);
}
}
}
Initially, I can view the entire agrArr on the console but encounter an error when looping through the nested arrays. The error message displayed is:
ERROR TypeError: Cannot read properties of undefined (reading 'serviceArr')
Upon further investigation, individual elements of agrArr also return undefined values. This inconsistency arises after successfully retrieving the complete array initially. How do I troubleshoot this issue and properly access elements within both arrays?