Apologies for the lengthy post, but I needed to provide a detailed explanation of the issue I am facing.
In my form, there is a control that contains an array of JSON data. I have created a reactive form based on this structure. Below are the JSON data and the TypeScript code:
JSON Data (retrieved from backend)
{
"questionList": [
{
"questionCategory": {
"questionCategoryName": "JAVA",
"id": 40,
"isActive": true,
"timestamp": "2020-06-12 14:06:47.325"
},
// Other nested objects and arrays here
},
{
// Second question object here
}
],
"empty": false
}
TS Code corresponding to this JSON data
// TypeScript code snippet here
Explaining the TS code:
I have defined a form called updateQuestionForm which reflects the structure of the JSON data.
Another form named optionForm is specifically for handling the options FormArray within updateQuestionForm.
The onEdit() method is triggered by a button click event where JSON data is fetched from a Mat-Table.
The HTML Form
<form [formGroup]="updateQuestionForm" (submit)="onUpdateQuestionForm()">
<!-- HTML form structure here -->
</form>
This represents the form structure related to the JSON data. While I am able to fetch and store values for most controls successfully, I am encountering issues with displaying the options control. Despite having 4 options in the JSON data, I face difficulties in rendering these options using ngFor inside formArrayName="options". This is resulting in no content being displayed after the h2 tag.
If anyone could guide me through this difficulty, it would be greatly appreciated. For reference, I was following this link regarding looping through formArrayName.