Angular create reactive form with deeply nested json

I am trying to generate Angular reactive forms using json. my json structure is like this.

{
    "name": "NationalInfo",
    "field": [
      {
        "type": "textbox",
        "key": "natInfo",
        "label": "Nat Info",
        "value": "",
        "required": false,
        "order": 1
      },
      {
        "name": "NatInfo",
        "field": [
          {
            "type": "textbox",
            "key": "appNum",
            "label": "App Num",
            "value": "",
            "required": false,
            "order": 1
          },
          {
            "type": "textbox",
            "key": "brandyPhonetic",
            "label": "Brandy Phonetic",
            "value": "",
            "required": false,
            "order": 2
          },
          {
            "type": "textbox",
            "key": "cry",
            "label": "Cry",
            "value": "",
            "required": false,
            "order": 3
          },
          {
            "type": "textbox",
            "key": "natFinalDispDt",
            "label": "Nat Final Disp Dt",
            "value": "",
            "required": false,
            "order": 4
          },
          {
            "type": "textbox",
            "key": "pTOPhonetic",
            "label": "P T O Phonetic",
            "value": "",
            "required": false,
            "order": 5
          },
          {
            "type": "textbox",
            "key": "ptoStsCd",
            "label": "Pto Sts Cd",
            "value": "",
            "required": false,
            "order": 6
          },
          {
            "name": "NatInfoRejectionCodes",
            "field": [
              {
                "type": "textbox",
                "key": "rejectionCode",
                "label": "Rejection Code",
                "value": "",
                "required": false,
                "order": 1
              }
            ]
          }
        ]
      }
    ]
  }

This is just one object in array of objects, I have multiple object same like above in that array with more nested childs.

Output which I want is like this

this.obj = {
  "NationalInfo": new FormGroup({
    "natInfo": new FormControl(""),
    "NatInfo": new FormGroup({
      "appNum": new FormControl(""),
      "brandyPhonetic": new FormControl(""),
      "cry": new FormControl(""),
      "natFinalDispDt": new FormControl(""),
      "pTOPhonetic": new FormControl(""),
      "ptoStsCd": new FormControl(""),
      "NatInfoRejectionCodes": new FormGroup({
        "rejectionCode": new FormControl("")
      })
    })
  })
}
this.form = new FormGroup(this.obj);

and then I want to render this in html.

I have tried all solutions available but could not do it. Will be appreciated any help.

Thanks.