Looking to create a dynamic form using an array that includes FieldLabel and DataModel references. I want to use the DataModel as an object reference, so when the user updates an input field, the referenced model is updated.
I have searched extensively but haven't found a solution yet. Is there another way to achieve this?
I attempted iterating through the model and used the DataModel attribute in [(ngModel)], but it's treating it as a string instead of referencing the main object.
obj : any = {
FirstName:"Taha",
MiddleName:"Faheem",
LastName:"Hussain",
Address:
{
CurrentAddress:"USA",
PermanentAddress:"Pakistan"
}
}
fields: any[] = [
{
"FieldLabel": "First Name",
"DataModel": "obj.FirstName"
},
{
"FieldLabel": "Middle Name",
"DataModel":"obj.MiddleName"
},
{
"FieldLabel": "Current Address",
"DataModel":"obj.Address.CurrentAddress"
}
];
<div class="container" fxLayout="column" fxLayoutGap="10px">
<div *ngFor="let field of fields">
<input placeholder="{{field.FieldLabel | uppercase}}" [(ngModel)]="field.DataModel">
</div>
<div>
<input placeholder="Last Name" [(ngModel)]="obj.LastName">
</div>
<br> {{obj|json}}
</div>
My goal is to update the obj with the values entered by the user in the ngFor input fields. Additionally, I am working on generating a complete dynamic form with formulas for each field using this method. Any suggestions for achieving the desired result?