How to make Angular Reactive (Dynamic) form with API Response data? Need advise

Question

[
  {
    "name": "jkjk",
    "firstName": "hgh",
    "lastName": "ehtrh",
    "replytype": "svdv",
    "prodCode": "svv",
    "executor": "ewwe",
    "skills": [
      {},
      {}
    ]
  },
  {
    "name": "sdkjbdsf",
    "firstName": "kdvbfd",
    "lastName": "dkbd",
    "replytype": "SQLServer",
    "prodCode": "vsdv",
    "executor": "vkjbndsf,vd",
    "skills": [
      {
        "name1": "abs"
      },
      {
        "name2": "bbs"
      }
    ]
  }
]

Answer 1

In this case I recommend you to use a *ngFor loop and generate your inputs.

Add keys as the name property and the values as value.

Then you can post the data as the usual way back.

<form>
  <div *ngFor="let item of array">
    <ng-container *ngFor="let i of item | keyvalue">
      <input [name]=i.key [value]="i.value" />
    </ng-container>
  </div>
  <button type="submit" (click)="edit()"></button>
</form>

• Use some conditional tags to provide other types of form tags (select, textarea, ...).