Apologies, I am having difficulty articulating this issue.
I am attempting to display a form that iterates through an array of object keys and generates input fields based on the number of properties an object has.
For instance:
<form [ngFormModel]="dataForm" (ngSubmit)="save()">
<fieldset>
<legend>Data</legend>
<div class="form-group" *ngFor="#key of dataKeys"
<label>{{ key }}</label>
<input
[(ngModel)]="data." + key
class="form-control"
ngControl="key"
#key="ngForm">
</div>
</fieldset>
</form>
I am aiming for the output to resemble this:
<form [ngFormModel]="dataForm" (ngSubmit)="save()">
<fieldset>
<legend>Data</legend>
<div class="form-group">
<label>id</label>
<input
[(ngModel)]="data.id"
class="form-control"
ngControl="id"
#id="ngForm">
</div>
<div class="form-group">
<label>score</label>
<input
[(ngModel)]="data.score"
class="form-control"
ngControl="score"
#score="ngForm">
</div>
...
</fieldset>
</form>
I understand that my current template structure is flawed, but I am struggling to find a viable solution. I thought about creating a custom directive, however, despite researching extensively, I am still unable to implement it successfully.
Thank you in advance for your assistance!