title: How create dynamic form controls and fetch data from it in Angular
body: <p>I'm very new to Angular and stuck on a problem.</p>
  <p>When the component loads I have two input fields as terminal ID(textfield) and terminal type(dropdown). After selecting value from dropdown, onChange method makes an API call and gets data for me. The data is in this format:</p>
  <pre><code>    data={
     &quot;productResults&quot;:[
        {
           &quot;productId&quot;:&quot;1&quot;,
           &quot;productName&quot;:&quot;credit&quot;
        },
        {
           &quot;productId&quot;:&quot;2&quot;,
           &quot;productName&quot;:&quot;debit&quot;
        }
     ],
     &quot;metaResultList&quot;:[
        {
           &quot;customizationType&quot;:&quot;time&quot;,
           &quot;customizationValue&quot;:&quot;0420&quot;,
           &quot;longDescription&quot;:&quot;Item1&quot;
        },
        {
           &quot;customizationType&quot;:&quot;code&quot;,
           &quot;customizationValue&quot;:&quot;N&quot;,
           &quot;longDescription&quot;:&quot;Auto Close&quot;,
           &quot;customizationCodeDetail&quot;:{
              &quot;customizationCodeDetails&quot;:[
                 {
                    &quot;value&quot;:&quot;N&quot;,
                    &quot;shortDescription&quot;:&quot;None&quot;
                 },
                 {
                    &quot;value&quot;:&quot;H&quot;,
                    &quot;shortDescription&quot;:&quot;host Auto Close&quot;
                 }
              ]
           }
        },
        {
           &quot;customizationType&quot;:&quot;bool&quot;,
           &quot;customizationValue&quot;:&quot;Y&quot;,
           &quot;longDescription&quot;:&quot;Block Account&quot;
        },
        {
           &quot;customizationType&quot;:&quot;bool&quot;,
           &quot;customizationValue&quot;:&quot;N&quot;,
           &quot;longDescription&quot;:&quot;Block Sales&quot;
        },
        {
           &quot;customizationType&quot;:&quot;number&quot;,
           &quot;customizationValue&quot;:&quot;55421&quot;,
           &quot;longDescrption&quot;:&quot;Max Value&quot;
        }
     ]
  }
  </code></pre>
  <p>What i did is when i get data after selecting from dropdown, I have two sections here below my these two firlds which will shown with ngIf I get data:</p>
  <p>1st: Product Section- Where i used ngFor to iterate over data.productResults like this and displayed the toggles</p>
  <pre><code>&lt;div *ngFor=&quot;let product of data.productResultResults&quot;&gt;
      &lt;label&gt;{{product.productName}}&lt;/label&gt;
      &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>2nd : Others Section: Here I iterate over metaResultList to display textfield if customizationType is time or number, dropdown if customizationType is code and toggle if customizationType is bool.</p>
  <pre><code>&lt;div *ngFor=&quot;let other of data.metaResultList&quot;&gt;
      &lt;div *ngIf=&quot;other.customizationType==='time'||other.customizationType==='number'&quot;&gt;
  &lt;label&gt;{{other.longDescription}}&lt;/label&gt;
  &lt;input type=&quot;text&quot; value=&quot;other.customizationValue&quot;/&gt;
      &lt;/div&gt;
       &lt;div *ngIf=&quot;other.customizationType==='bool'&quot;&gt;
  &lt;label&gt;{{other.longDescription}}&lt;/label&gt;
  &lt;ion-toggle&gt;&lt;/ion-toggle&gt;
      &lt;/div&gt;
      &lt;div *ngIf=&quot;other.customizationType==='code'&quot;&gt;
  &lt;label&gt;{{other.longDescription}}&lt;/label&gt;
  &lt;dropdown [datalist]=&quot;autoCloseDropDown&quot;&gt;&lt;/dropdown&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>This dropDown is my custom dropdown and I'm passing value as H for host Auto Close and N for None and I'm getting options in dropdown(I did that logic after getting results).</p>
  <p>After clicking on submit button below , I want my data to be in this format</p>
  <pre><code>{
     &quot;tid&quot;:&quot;3&quot;,
     &quot;terminalType&quot;:&quot;gateway&quot;,
     &quot;products&quot;:[
        {
           &quot;productId&quot;:&quot;1&quot;,
           &quot;productname&quot;:&quot;credit&quot;
        }
     ],
     &quot;customizations&quot;:[
        {
           &quot;customizationName&quot;:&quot;Item1&quot;,
           &quot;customizationValue&quot;:&quot;0420&quot;
        },
        {
           &quot;customizationName&quot;:&quot;Block Account&quot;,
           &quot;customizationValue&quot;:&quot;Y&quot;
        },
        {
           &quot;customizationName&quot;:&quot;Block Sales&quot;,
           &quot;customizationValue&quot;:&quot;N&quot;
        },
        {
           &quot;customizationName&quot;:&quot;Max Value&quot;,
           &quot;customizationValue&quot;:&quot;54556&quot;
        }
     ]
  }
  </code></pre>
  <p>Now my question is how to make formcontrols and as these fields are generating after i make decision in terminal type dropdown, but i already made the formgroup in ngOnInit.How should I make the form control names dynamic. How will I insert only those value in products array whose value is Y in form. IS there any way I can instantiate formgroup after making change in dropdown?Also there might be case that i won't get certain fields like type=bool sometime from api, so i won't show that in FrontEnd</p>
  <p>Any help would be appreciated.</p>