title: Creating Table in Angular Reactive Forms in Angular
body: <p>I'm trying to create a table using reactive forms in Angular Material. The problem is how can i implement a functionality that when you click the button "add row", it will automatically add a row, where you can input on a field.  </p>
  
  <p><a href="https://stackblitz.com/edit/angular-material-add-row-add-row?file=app%2Ftable-basic-example.ts" rel="nofollow noreferrer">Please see this stackblitz link</a></p>
  
  <pre class="lang-js prettyprint-override"><code>createForm() {
    this.form = this.fb.group({
      products: this.fb.array([]),
    });
  }
  
  addRow() {
    const rows = this.form.get('products') as FormArray;
    rows.push(
      this.fb.group({
        product_id: [null],
      })
    );
  }
  </code></pre>