Reference input ngModel to object in ngFor loop

Question

I am trying to generate dynamic form using the array. In that array I am providing the FieldLabel & DataModel. Here I want to use DataModel as the object reference. I want to update the referenced model when user update the value in Input Field. I have searched a lot but not able to find the solution yet.

Is there any other way to achieve what I want?

I have tried Iterating the model and used the DataModel attribute in [(ngModel)] but it is taking that as a STRING (which is valid) but I don't want this. I want to reference the main object instead of taking that as a string.

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>

I want to update the obj with the value user enter in ngFor input fields.

I am working to generated the complete dynamic form along with the formula on each fields using this approach. Is there any better approach to get the desired result?

Is there anything preventing you from using reactive forms? They are far more flexible, and allow for properly dynamic forms. — Will Alexander
– Will Alexander, Commented May 29, 2019 at 19:30

user2216584 · Accepted Answer · 2019-05-29 21:41:46Z

By creating fields array and having DataModel, you have disconnected the original "obj" with input. If you want to take this approach then do following [Or see the following stackblitz - https://stackblitz.com/edit/angular-pdpqog?file=app/app.component.ts]-

obj : any = {
      FirstName:"Taha",
      MiddleName:"Faheem",
      LastName:"Hussain"
  }

  fields: any[] = [
    {
      "FieldLabel": "Person Name",
      "property": 'FirstName',
      "value": this.obj.FirstName
    },
    {
      "FieldLabel": "Current Address",
      "property": 'MiddleName',
      "value": this.obj.MiddleName
    } 
  ];

  onChange($event, field) {
    this.obj[field.property] = $event;
  }

<div class="container" fxLayout="column" fxLayoutGap="10px">
  <div *ngFor="let field of fields">
    <input placeholder="{{field.FieldLabel | uppercase}}" [ngModel]="field.value" (ngModelChange)="onChange($event, field)">
  </div>
  <div>
    <input placeholder="Last Name" [(ngModel)]="obj.LastName">
  </div>
  <br> {{obj|json}}
</div>

Collectives™ on Stack Overflow

Reference input ngModel to object in ngFor loop

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related