I am facing an issue when trying to iterate over a dynamically generated FormControl in the HTML section. Instead of displaying the expected values, I am getting [object Object],[object Object] in the input field.
Here is the provided data structure:
{
"security_groups": {
"databaseName1": [{
"destination": "10.0.8.1-10.0.8.255",
"ports": "27000-27499",
"protocol": "tcp"
}, {
"destination": "10.0.8.1-10.0.8.255",
"ports": "27000-27499",
"protocol": "tcp"
}],
"xyz": [{
"destination": "10.0.8.1-10.0.8.255",
"ports": "27000-27499",
"protocol": "tcp"
}]
}
}
The JSON structure remains consistent but the naming can vary except for the key "security_groups."
In my controller, I have the following code snippet:
public form: FormGroup;
public data: any;
constructor(private _fb: FormBuilder) {
}
ngOnInit() {
this.data = this.dataSet[this.key];
this.form = this._fb.group({});
Object.keys(this.data).forEach(name => {
this.form.addControl(name, new FormControl(
this.data[name], [<any>Validators.required, <any>Validators.minLength(1)]
));
});
Upon checking the console, I see the structure as mentioned above.
Now, I need to iterate over these FormControls ("databaseName1" and "xyz") and display their names in the input fields.
Below is the current HTML code:
<form [formGroup]="form" (ngSubmit)="onSave(form)">
<div *ngFor="let control of form.controls | keyVal; let i=index">
control.log(control.key)
<input class="form-control" [formControlName]=control.key>
</div>
</form>
However, instead of the actual names, the input fields show [object Object],[object Object]. How can I resolve this issue?
Is there anything wrong with how the form is being created in the controller?
Thank you for your assistance.