angular dynamic model binding not working

Question

I have tried to dynamically bind the control using the angular but some reason it is not binding correctly. what I am missing here.

     <ng-container *ngFor='let ui of uiData'>
            <ng-container *ngIf="ui.position === 'left'">
                <div class="p-grid">
                    <div>
                        <label>{{ ui.label }}</label>
                    </div>
                    <div>
                        <input id="input" type="text" [(ngModel)]= "ui[model]">
                    </div>
                </div>
            </ng-container>
        </ng-container>



      <div>
            <button pButton type="button" (click)="SubmitData();" label="Save"></button>
        </div>

All I am trying to here is get the data user has entered on the fields when button clicks.

export class DynamicLoadComponent implements OnInit {
 uiData:any; 
 userData:UserDataModel  = null;

constructor() {

  this.uiData = [
    { label:"test1",position: "left", control: "textbox",model: "userData.child1.docNumber" },
    { label:"test1",position: "left", control: "textbox", model: "userData.child1.ws"},
    { label:"test1",position: "right", control: "textbox", model: "userData.child1.ns" },
    { label:"test1",position: "left", control: "textbox", model: "userData.child1.dueDate" },
    { label:"test1",position: "left", control: "textbox",model: "userData.child1.initDate" },
  ]

  }
  SubmitData(){
     console.log(this.userData);
   }

}

Model class looks like this

export class UserDataModel {
   child1: {
       docNumber: string;
      ws: number;
      ns: number;
      dueDate: string;
      initDate: string;
  }
}

Answer 1

Your variable uiDate is an array of objects, therefore my guess is that you should address the item as [(ngModel)] = "ui.model" instead of [(ngModel)] = "ui[model]"

EDIT

just tried it out:

x.component.html:

<ng-container *ngFor='let ui of uiData'>
  <ng-container *ngIf="ui.position === 'left'">
      <div class="p-grid">
          <div>
              <label>{{ ui.label }}</label>
          </div>
          <div>
              <input id="input" type="text" [(ngModel)]= "ui.model">
          </div>
      </div>
  </ng-container>
</ng-container>



<div>
  <button pButton type="button" (click)="SubmitData();" label="Save"></button>
</div>

x.component.ts:

uiData:any; 
  userData:any  = null;

 constructor() {

   this.uiData = [
     { label:"test1",position: "left", control: "textbox",model: "userData.child1.docNumber" },
     { label:"test1",position: "left", control: "textbox", model: "userData.child1.wi"},
     { label:"test1",position: "right", control: "textbox", model: "userData.child1.nri" },
     { label:"test1",position: "left", control: "textbox", model: "userData.child1.dueDate" },
     { label:"test1",position: "left", control: "textbox",model: "userData.child1.initDate" },
   ]

   }
   SubmitData(){
      console.log(this.userData);
    }

results in:

Answer 2

You have to instanciate UserDataModel and set [(ngModel)] = "userData[ui.model]"