title: Angular 2 Reactive forms - Create input fields dynamically
body: <p>Using Dynamic forms, I need to give users the ability to create forms fields dynamically. There needs to be a 'Add' button and when user clicks on this button, 4 input fields would be created.</p>
  
  <p>I am able to create one field dynamically so far. Below is my code</p>
  
  <p>In the HTML, I am using index to create the formControlName</p>
  
  <pre><code>&lt;div class="row"&gt;
            &lt;div class="col-xs-12"&gt;
              &lt;div formArrayName="properties"&gt;
  
                &lt;button class="btn btn-default btn-xs" type="button" (click)="onAddProperty()"&gt;Add&lt;/button&gt;
                &lt;div class="form-group" *ngFor="let propertyControl of searchForm.get('properties').controls; let i = index"&gt;
                  &lt;input type="text" class="form-control" [formControlName]="i"&gt;
  
                  &lt;!--       &lt;input type="text" class="form-control" [formControlName]="'B'"+"i"&gt;
                &lt;input type="text" class="form-control" [formControlName]="'C'"+"i"&gt;
                &lt;input type="text" class="form-control" [formControlName]="'D'"+"i"&gt; --&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>and then in the component, pushing the control to the FormArray</p>
  
  <pre><code>searchForm: FormGroup;
  onAddProperty() {
      const control = new FormControl(null);
      (&lt;FormArray&gt;this.searchForm.get('properties')).push(control);
    }
  </code></pre>
  
  <p>Now, I can click 'Add' button any number of times, and for every click one input field will be created.</p>
  
  <p>However, instead of one input field, I need 4 inputs fields to be created for every click. I am not able to make out how to give each of these form fields unique formControlName. Right now, I am using index of the field which would be unique for 1 field, but wouldn't be so for 4 fields.</p>