I am currently working on a form where I need to dynamically add controls using reactiveForms.
One specific task involves populating a dropdown menu. To achieve this, I am utilizing formArray as the fields are dynamic.
Data:
{
"ruleName": "",
"ruleDescription": "",
"ruleOutcome": "",
"addVariable": "2",
"variables": [
{
"id": "2",
"name": "Device Trust Score",
"operator": [
{
"name": "Greater Than <",
"id": 3
},
{
"name": "Less Than >",
"id": 4
}
],
"values": ""
}
]
}HTML:
<tbody formArrayName="variables">
<tr *ngFor="let variable of addRuleForm.get('variables').controls; let i=index" [formGroup]="variable">
<td>{{ addRuleForm.controls.variables.controls[i].controls.name.value}}
<input type="hidden" formControlName="id" value="addRuleForm.controls.variables.controls[i].controls.id.value" [attr.id]="'id'+i">
</td>
<td>
<select class="form-control input-sm" formControlName="operator" [attr.id]="'operator'+i">
<option value="">Select an Operator</option>
<option *ngFor="let o of addRuleForm.controls.variables.controls[i].controls.operator.value" value="{{ o.id }}">{{ o.name }}</option>
</select>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" (click)="removeVariable(v.id)"><i class="fa fa-trash-o"></i>
</button>
</td>
</tr>
</tbody>
The select input is displayed correctly on the page and the ID value is set correctly when inspected in the source code.
However, upon selecting an option from the dropdown, I encounter the following error:
Error: Error trying to diff '4'. Only arrays and iterables are allowedAny suggestions?