title: How to create dynamic array in angular 4 reactive form and bind each field with input (formControlName)?
body: <p>I am working in angular 4 and facing an issue, I have created an array in form and bind each and every group with input field but when I fill the first field then it will automatically fill the second filed in browser but in form only value on one field will be  available.</p>
  
  <p>dynamicArray.ts</p>
  
  <pre><code>addNewArrayForm : FormGroup;
  
  constructor(private formBuilder : FormBuilder){}
  
  ngOnInit() {
     this.addNewArrayForm = this.formBuilder.group({
        testArray : this.formBuilder.array([])
     });
  
     let arrayValue = [1, 2, 3, 4, 5];
     let testArrayField = &lt;FormArray&gt;this.addNewArrayForm.controls['testArray'];
     for(let value of arrayValue){
        testArrayField.push(new FormControl(null));
     }
  
     checkValue(){
        console.log(this.addNewArrayForm.value);
        //Output 
        {
           testArray : ['1','12',null,null,null]
        }
     }
  }
  </code></pre>
  
  <p>dynamicArray.html</p>
  
  <pre><code>&lt;form [formGroup] = "addNewArrayForm"&gt;
     &lt;div class="card" formArrayName="testArray" *ngIf="addNewArrayForm.controls['testArray'].value &amp;&amp; (addNewArrayForm.controls['testArray'].value).length &gt; 0"&gt;
        &lt;div *ngFor="let value of addNewArrayForm.controls['testArray'].value; let x = index "&gt;
           &lt;input type="text" formControlName="{{x}}"&gt;
        &lt;/div&gt;
        &lt;div&gt;
           &lt;button type="button" class="btn" (click)="checkValue()"&gt;Click&lt;/button&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>You can check my issue on this link: <a href="https://angular-pdx2q2.stackblitz.io" rel="nofollow noreferrer">https://angular-pdx2q2.stackblitz.io</a></p>
  
  <p>Thank you.</p>