Dynamically adding form fields using Angular formArray

I have a few form fields and want to add more fields dynamically which is coming from another view(where user can enter the form field type, length and name), I Need to construct form fields using these values.

Some how i have managed to construct one field(textbox name is 'one') but if i try to add another field(textbox name is 'two') getting the following error saying,
ERROR Error: Cannot find control with path: 'newfields -> 0 -> two'

issuecomponent.html

<form [formGroup]="issuerTestCaseFrm">
               <div>
                   <label for="inputName3">Issuer Reference Number: </label>
                   <input name="lcid" formControlName="IssuerReferenceNumber" required type="tel" class="form-control">
               </div>
                   <div formArrayName="newfields">
                   <div [formGroupName]="i" *ngFor="let tech of issuerTestCaseFrm.controls.newfields.controls; let i = index">
                   <div *ngFor="let prop of fieldProps">
                               <label class="col-sm-2 control-label">{{fields[prop].label}}</label>
                               <div [ngSwitch]="fields[prop].type">
                                   <input *ngSwitchCase="'text'" [formControlName]="prop"> 
                               </div>
                       </div>
                   </div>
               </div>  
   </form>
<button type="submit" (click)="addNewInputField()"> &nbsp;Add New Column &nbsp; </button>

issuecomponent.ts

import { Component, ViewEncapsulation, Pipe, PipeTransform, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { ModalComponent } from '../../modal/modal.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'viewhistory',
  templateUrl: './issuecomponent.html',
})


export class IssuerTestcaseExecution implements OnInit {
  issuerTestCaseFrm: FormGroup;
  fields: any;
  fieldProps: any;
  formControls = {};
  constructor( 
    private fb: FormBuilder,  
    public modalService: NgbModal,
    ) {
    this.issuerTestCaseFrm = fb.group({
      'IssuerReferenceNumber': ['', Validators.required],
      'newfields': fb.array([]),
    });
  }

  initNewFields(): FormGroup {
    this.fieldProps.forEach(prop => {
      this.formControls[prop] = [this.fields[prop].value, Validators.required];
    });
    return this.fb.group(this.formControls);
  }

 //Assuming these results coming from modal view after add button click
  addNewInputField(): void {
      const modalRef = this.modalService.open(ModalComponent);
      modalRef.result.then((result) => {
         this.fields = {
          [result.fieldname]: {
            type: result.fieldtype,
            value: result.fieldvalue,
            label: result.fieldname,
          },
        };
        this.fieldProps = Object.keys(this.fields);
         const control = <FormArray>this.issuerTestCaseFrm.controls.newfields;
         control.push(this.initNewFields());
      }, (reason) => {

      });
  }
}

Start writing here...