title: How to dynamically add FormControl to FormArray on button click in Angular?
body: <p>How can I add a <code>formcontrol(option)</code> dynamically in <code>formarray</code>? I want to dynamically add questions to a <code>formarray</code>. Upon clicking a button, it should update the display. I'm using angular 7.</p>
  <h2>Component code</h2>
  <pre><code>ngOnInit() {
    this.quizForm = this.fb.group({
      questions: this.fb.array([]),
      questions2: this.fb.array([]),
    });
  }
      
  //creating formcontrol
  createItem(): FormGroup {
    return this.fb.group({
      ques: '',
    });
  }
      
  //pushing code
  genField() {
    this.message = true;
    this.questions = this.quizForm.get('questions') as FormArray;
    this.questions.push(this.createItem());
  }
  </code></pre>
  <h2>HTML Template</h2>
  <p>I want to add form control option dynamically on button click and form control should be inside the <code>formArrayName=&quot;questions&quot;</code>.</p>
  <pre><code>&lt;form [formGroup]=&quot;quizForm&quot; class=&quot;adjust-form&quot;&gt;
    &lt;div formArrayName=&quot;questions&quot; 
      *ngFor=&quot;let item of quizForm.get('questions').controls; let i = index;&quot;&gt;
      &lt;div class=&quot;col-md-10 col-sm-6 mt-3 mb-3&quot; [formGroupName]=&quot;i&quot;&gt;
        &lt;label&gt;{{i +1}} - {{question}} &lt;/label&gt;
        &lt;i class=&quot;flaticon-delete&quot;    
            (click)=&quot;quizForm.get('questions').controls.splice(i,1) &quot;
            style=&quot;font-size: 9px;padding-left: 80px;&quot;&gt;
        &lt;/i&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control col-10&quot;
              [(ngModel)]=&quot;item.ques&quot; formControlName=&quot;ques&quot;
              placeholder=&quot;Enter your question&quot; required&gt;
          &lt;button *ngIf=&quot;i == 0&quot; (click)=&quot;genField()&quot; type=&quot;button&quot;
              class=&quot;btn btn-secondary btn-elevate btn-circle btn-icon ml-4&quot;&gt;
              &lt;i class=&quot;flaticon2-plus&quot;&gt;&lt;/i&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div *ngIf=&quot;item.touched &amp;&amp; item.invalid&quot; class=&quot;kt-font-danger text-left&quot;&gt;
          &lt;p&gt;required&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>