将输入 ngModel 引用到 ngFor 循环中的对象答案

【问题标题】：Reference input ngModel to object in ngFor loop将输入 ngModel 引用到 ngFor 循环中的对象
【发布时间】：2019-05-29 19:10:36
【问题描述】：

我正在尝试使用数组生成动态表单。在该数组中，我提供了 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。

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

【问题讨论】：

有什么东西阻止你使用响应式表单吗？它们更加灵活，并且允许适当的动态表单。

标签： javascript angular typescript

【解决方案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>

【讨论】：