I have a dynamic set of html elements as below. What I need to do is I need to match each of these element's values to a array. which means each group of attributes inside the for loop needed to push to the array as elements.As you can see RoomTyperesposneDtoList is the array .The input fields values are the properties of the element(object). My component's html code is as below.

<div class="row" *ngFor="let viewRoomType of viewRoomTypes; index as i ;">
    <div class="form-group col-md-2">
      <label for="roomType">Room Type</label>
      <input [(ngModel)]="contractAddRequest.roomTypeResponseDtoList[i].type" name="roomType" type="text"
             class="form-control txt-field-add-update-contract" id="roomType" placeholder="Room Type">
    </div>
    <div class="form-group col-md-2">
      <label for="price">Price per person</label>
      <input [(ngModel)]="contractAddRequest.roomTypeResponseDtoList[i].price" name="price" type="text"
             class="form-control txt-field-add-update-contract" id="price" placeholder="Price per person">
    </div>
    <div class="form-group col-md-2">
      <label for="maxAdults">Maximum no of Adults</label>
      <input [(ngModel)]="contractAddRequest.roomTypeResponseDtoList[i].maxAdults" name="maxAdults" type="text"
             class="form-control txt-field-add-update-contract" id="maxAdults" placeholder="Max adults">
    </div>
    <div class="form-group col-md-2">
      <label for="noOfRooms">No of rooms</label>
      <input [(ngModel)]="contractAddRequest.roomTypeResponseDtoList[i].availableCount" name="noOfRooms" type="text"
             class="form-control txt-field-add-update-contract" id="noOfRooms" placeholder="Available rooms">
    </div>

    <div *ngIf="viewRoomType>0" class="form-group col-md-2 mt-4">
      <button type="button" class="btn btn-danger ">
        <fa-icon [icon]="faTrash"></fa-icon>
      </button>
    </div>

  </div>