title: How to set the object key value in an angular reactive form
body: <p>I have an object like this.</p>
  <pre><code>types: {
    2: {
       zoom: true,
       select: true
    },
    4: {
       zoom: true,
       select: true
    },
  }
  </code></pre>
  <p>Is it possible to create this json object from a angular form?</p>
  <pre><code>&lt;div formGroupName=&quot;types&quot;&gt;
      &lt;input type=&quot;number&quot; matInput placeholder=&quot;Type&quot; [(ngModel)]=&quot;searchType&quot; i18n-placeholder&gt;
  
      &lt;div [ngModelGroup]=&quot;searchType&quot;&gt;
          &lt;mat-slide-toggle [(ngModel)]=&quot;searchType.zoom&quot; color=&quot;primary&quot;&gt;Zoom&lt;/mat-slide-toggle&gt;
          &lt;mat-slide-toggle [(ngModel)]=&quot;searchType.select&quot; color=&quot;primary&quot;&gt;Klik&lt;/mat-slide-toggle&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Sadly it's not possible to change the json but the numbers need to be changable. The form is reactive driven but I could not find a way so I tried template driven but neither way worked out.</p>