title: Add inputs dynamically when click on button in angular 4
body: <p>I would create a form with the possibility to add  inputs dynamically<br>
  I found a <a href="https://stackoverflow.com/questions/41256852/how-to-add-more-input-fields-using-a-button-angular-2-dynamic-forms">question</a> about the same problem in angular 2  but I can't make it working in my exemple</p>
  
  <p>Here's my component <strong>ts</strong> file : </p>
  
  <pre><code>export class AjoutProjetComponent implements OnInit {
      isLinear = false;
      firstFormGroup: FormGroup;
      secondFormGroup: FormGroup;
  
      constructor(private _formBuilder: FormBuilder) {}
  
      ngOnInit() {
          this.secondFormGroup = this._formBuilder.group({
              pers: [this._formBuilder.array([this.createItem()])]
          });
      }
      createItem(): FormGroup {
          return this._formBuilder.group({
              name: ['', Validators.required]
              poste: ['', Validators.required],
  
          });
      }
      addItem(): void {
          const control = &lt; FormArray &gt; this.secondFormGroup.controls['pers'];
          control.push(this.createItem());
      }
  
  }
  </code></pre>
  
  <p><strong>then HTML file</strong></p>
  
  <pre><code>&lt;mat-step [stepControl]="secondFormGroup"&gt;
      &lt;form [formGroup]="secondFormGroup"&gt;
          &lt;ng-template matStepLabel&gt;Constituez votre équipe&lt;/ng-template&gt;
          &lt;div formArrayName="pers"&gt;
              &lt;mat-form-field *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index"&gt;
                  &lt;input matInput placeholder="Nom collaborateur" formControlName="name" required&gt;
              &lt;/mat-form-field&gt;
  
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/mat-step&gt;
          &lt;div&gt;{{secondFormGroup.value | json}}&lt;/div&gt;
  </code></pre>
  
  <p>When I click in my favorite icon I get this error :</p>
  
  <pre><code>ERROR TypeError: control.push is not a function at AjoutProjetComponent.addItem
  </code></pre>
  
  <p>How can I make adding dynamically inputs working ? </p>
  
  <p><strong>UPDATE</strong>
  I have updated my html code so that I could print two inputs but when I run my code I get this error now </p>
  
  <pre><code>ERROR Error: Cannot find control with path: 'pers -&gt; name'
  </code></pre>