title: Dynamic key / value form reactive angular 5
body: <p>I've searched for a long time and I didn't find what I want to do. I would like to add dynamic key/value with angular 5 and reactive form. </p>
  
  <p>When I click on a button "add parameter", 2 inputs appear dynamically. One for key, the other for the value.</p>
  
  <p>And when I submit my form, I would like to get this :</p>
  
  <p>{ 
  settings : {
     key1: value1,
     key2: value2...
  }
  }</p>
  
  <p>Here what I've done :</p>
  
  <p>my component :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        constructor(
          protected fb: FormBuilder,
  
      ) {
  
          // form init
          this.testForm = fb.group({
              'name': fb.control('', [Validators.required]),
              'desc': fb.control('', [Validators.required]),
              'config': fb.array([])
          });
      }
      
      
      ...
  
  getControls(frmGrp: FormGroup, key: string) {
      return (&lt;FormArray&gt;frmGrp.controls[key]).controls;
  }
      
   
      addConfigBlock() {
  
          let settingBlock = this.testForm.get('setting') as FormArray;
  
          settingBlock.push(this.fb.group({key: '', value: ''}));
  
  
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>template.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                &lt;div fxLayout="column" fxflex="100%" class="form-standard"&gt;
                      &lt;div formArrayName="config" *ngFor="let setting of getControls(testForm, 'config'); let i = index;"&gt;
                          &lt;div [formGroupName]="i" fxLayout="column" fxFlex="100%"&gt; 
                              &lt;mat-form-field class="form-input"&gt; 
                                  &lt;input matInput formControlName="key" name="key" maxlength="255"
                                  placeholder="Key" required&gt; 
                              &lt;/mat-form-field&gt;
                              &lt;mat-form-field class="form-input"&gt; 
                                  &lt;input matInput formControlName="value" name="value" maxlength="255"
                                      placeholder="Value" required&gt; 
  
                              &lt;/mat-form-field&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;mat-card-content class="mat-card-content"&gt;
                      &lt;div fxLayout="row" fxLayoutAlign="start stretch" class="form-standard"&gt;
                          &lt;div fxFlex.gt-md="100" fxFlex.xs="100"&gt;
                              &lt;div fxLayoutAlign="space-around stretch"&gt;
                                  &lt;button type="button" mat-raised-button color="primary" (click)="addSetting()"&gt;Add setting&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/mat-card-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't know what is the best way to achieve this. Thank you very much :)</p>