I have the following html in my component, Im trying to generate a form dynamically based on the number of selected elements that can be from 0 to N

```
<form #form="ngForm" id="formGroupExampleInput">
  <div class="col-xs-5 col-md-offset-1">
    <a class="list-group-item clearfix" *ngFor="let selectedApi of selectedApps;let i=index">
      <div class="pull-right">
        <button type="button" class="close" (click)="removeFromSelectedApi(i)">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="pull-left">
        <h4 class="list-group-item-heading">{{selectedApi.url}}</h4>
        <p class="list-group-item-text">{{selectedApi.method}}</p>
        <div class="form-group">
            <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-users"
            placeholder="number of users" ngModel>
            <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-rpm"
            placeholder="request per minute between all users" ngModel>
        </div>
        <hr>
        <div class="form-group" *ngFor="let requiredHeader of selectedApi.requiredHeaders; let in=index">
          <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-{{requiredHeader}}"
            placeholder={{requiredHeader}} ngModel>
        </div>
        <div class="form-group" *ngFor="let requiredParameter of selectedApi.requiredParametersInURL; let in=index">
            <input type="text" class="form-control" id="formGroupExampleInput" name="{{i}}-{{requiredParameter}}"
              placeholder={{requiredParameter}} ngModel>
          </div>
        <div class="form-group" *ngIf="selectedApi.method=='POST' || selectedApi.method=='PUT' || selectedApi.method=='DELETE'">
          <!-- <textarea class="form-control" id="formGroupExampleInput" name="{{i}}-{{requiredHeader}}" rows=20></textarea> -->
          <textarea  class="form-control"
                rows="5"
                name="{{i}}-body" 
                id="{{i}}-body" 
                placeholder="body" ngModel></textarea>
        </div>
      </div>
    </a>
  </div>
  <div class="pull-right">
    <button class="btn btn-success btn-lg" (click)="onSubmitTest(form)">Submit</button>
  </div>
</form>

```

when I create new elements and submit the form I get as a result on form.value something like this:

```
0-auth-system: "c"
0-auth-user: "d"
0-auth-user-id: "e"
0-email: "h"
0-module: "g"
0-rpm: "b"
0-task-client-key: "f"
0-users: "a"
1-auth-system: "k"
1-auth-user: "l"
1-auth-user-id: "m"
1-rpm: "j"
1-task-client-key: "n"
1-users: "i"

```

and what I want in fact is an output like the following since it is easier for processing and I dont want to develop code to parse to the previous structure if I can have it as an array:

```
[
 {
  auth-system: "c"
  ,auth-user: "d"
  ,auth-user-id: "e"
  ,email: "h"
  ,module: "g"
  ,rpm: "b"
  ,task-client-key: "f"
  ,users: "a"
},
{
  auth-system: "k"
  ,auth-user: "l"
  ,auth-user-id: "m"
  ,rpm: "j"
  ,task-client-key: "n"
  ,users: "i"
 }
]

```

Anyone knows how I can achieve this?