title: How to parse JSON values to be fed to formcontrol?
body: <p>I get JSON reponse from the server from which I take the metadata required to build the FormGroup object. Since the JSON is dynamic and so is FormGroup object, how to parse the JSON fields in HTML?</p>
  
  <p>I looked at the angular documentation for dynamic forms <a href="https://angular.io/guide/dynamic-form" rel="nofollow noreferrer">https://angular.io/guide/dynamic-form</a> but here I see they are passing each class object to the <strong>dynamic-form-question.component.ts</strong> from the parent <strong>dynamic-form.component.ts</strong></p>
  
  <p>My JSON:</p>
  
  <pre><code>[
    {
      "key": "Basic",
      "required": false,
      "controlType": "section",
      "children": [
          {
              "key": "net1",
              "required": false,
              "controlType": "dropdown"
          },
          {
              "default": "",
              "key": "net2",
              "required": true,
              "controlType": "textbox"
          }
      ]
    },
    {
      "key": "Advanced",
      "required": false,
      "controlType": "section",
      "children": [
          {
              "key": "Area1",
              "required": false,
              "controlType": "sub-section",
              "children": [
                  {
                      "default": "test",
                      "key": "key1",
                      "required": false,
                      "controlType": "dropdown",
                      "choices" : [ "test",
                                    "test1",
                                    "test2"
                                  ]
                  },
                  {
                      "default": "pass",
                      "key": "key2",
                      "required": false,
                      "controlType": "textbox"
                  }
              ]
          },
          {
              "key": "Area2",
              "required": false,
              "controlType": "sub-section",
              "children": [
                  {
                      "default": false,
                      "key": "key3",
                      "required": false,
                      "controlType": "radiobutton"
                  }
              ]
          }
      ]
    }
  ]
  </code></pre>
  
  <p>for which the corresponding FormGroup Object is:</p>
  
  <pre><code>form = this.fb.group({
    Basic: this.fb.group ({
      net1: '',
      net2: ''
    }),
    Advanced: this.fb.group ({
      Area1: this.fb.group ({ 
        key1: 'test',
        key2: 'pass'
      }),
      Area2: this.fb.group ({
        key3: ''
    })
  })
  </code></pre>
  
  <p>In the HTML I need to get the fields from the JSON like controlType to decide on the type of input element and also the choices in case of a dropdown.</p>
  
  <p>What would be ideal way to parse the JSON in the typescript so that it can be passed onto the HTML?</p>
  
  <p>Basically I want the child object eg,</p>
  
  <pre><code>{
      "key": "net1",
      "required": false,
      "controlType": "dropdown"
  }
  </code></pre>
  
  <p>to be passed to JSON along with the corresponding formGroup object.</p>
  
  <p>My HTML looks like:</p>
  
  <pre><code>&lt;div&gt;
    &lt;form (ngSubmit)="onSubmit()" [formGroup]="form"&gt;
      &lt;div formGroupName="Basic"&gt;
        &lt;ng-container *ngFor="let controlName of controls('Basic.children')" formGroupName="children"&gt;
          &lt;input type="textbox" [formControlName]="controlName"&gt;&lt;br&gt;
        &lt;/ng-container&gt;
      &lt;/div&gt;
  
      &lt;div formGroupName="Advanced"&gt;
        &lt;div *ngFor="let groupName of controls('Advanced')" [formGroupName]="groupName"&gt;
          &lt;ng-container *ngFor="let controlName of controls('Advanced.' + groupName)"&gt;
            &lt;input type="textbox" [formControlName]="controlName"&gt;&lt;br&gt;
          &lt;/ng-container&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-row"&gt;
        &lt;button type="submit" [disabled]="!form.valid"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so that I can apply ngSwitch on the controlType just like in the example on the official website. (As of now the input element is of one type only. ).</p>
  
  <p>Can someone help me out with this?</p>