在ngFor循环中引用输入ngModel到object

Question

我正在尝试使用数组生成动态表单。 在该数组中，我提供了FieldLabel和DataModel。 在这里，我想使用DataModel作为对象引用。 我想在用户更新输入字段中的值时更新引用的模型。 我搜索了很多，但还没找到解决方案。

有没有其他方法可以实现我想要的？

我已经尝试迭代模型并使用[（ngModel）]中的DataModel属性，但它将其作为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>

我想用值用户输入ngFor输入字段来更新obj。

我正在努力使用这种方法生成完整的动态表单以及每个字段的公式。 有没有更好的方法来获得理想的结果？

Answer 1

通过创建字段数组并具有DataModel，您已使用输入断开原始“obj”。 如果您想采用这种方法，请执行以下操作[或查看以下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>