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>

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

1 个答案: