title: Add Dynamic value to input field inside a table in Angular 4
body: <p>I am trying to implement a dynamic row table where all the table cells are input fields.
  There is some preloaded data, but I am not able to add to the loaded data in the view. However add/ delete rows are working properly. I have tried ngModel and value but it's not working.</p>
  <p><strong>app.component.html:</strong></p>
  <pre><code>    &lt;table&gt;
              &lt;thead&gt;
                  &lt;button (click)=&quot;onAddRow()&quot; *ngIf=&quot;addForm.get('rows')&quot;&gt;add row&lt;/button&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor=&quot;let row of addForm.get('rows')?.controls;let index = index;&quot;&gt;
            &lt;!-- NOT WORKING with ngModel
            &lt;td&gt;name : &lt;input [ngModel]=&quot;row.get('name')&quot; [formControl]=&quot;row.get('name')&quot;&gt;&lt;/td&gt; --&gt;
              &lt;!-- NOT WORKING with value attribute
            &lt;td&gt;name : &lt;input value=&quot;row.get('name')&quot; [formControl]=&quot;row.get('name')&quot;&gt;\&lt;/td&gt; --&gt;
            &lt;td&gt;
              name : &lt;input  [formControl]=&quot;row.get('name')&quot;&gt;
            &lt;/td&gt;
            &lt;td&gt;
              description : &lt;input [formControl]=&quot;row.get('description')&quot;&gt;
            &lt;/td&gt;
            &lt;td&gt;
              qty : &lt;input [formControl]=&quot;row.get('qty')&quot;&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;button (click)=&quot;onRemoveRow(index)&quot;&gt;Remove&lt;/button&gt;
            &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  <p><strong>app.component.ts:</strong></p>
  <pre><code>import { Component } from '@angular/core';
  import { FormGroup, FormBuilder, Validators, FormControl, FormArray, NgForm } from '@angular/forms'
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    addForm: FormGroup;
    rows: FormArray;
    itemForm: FormGroup;
  
    constructor(private fb: FormBuilder) {
      this.addForm = this.fb.group({
        items: [null, Validators.required],
        items_value: ['no', Validators.required]
      });
      this.rows = this.fb.array([{
      &quot;name&quot;: &quot;Test Item&quot;,
      &quot;description&quot;: &quot;Dedsc&quot;,
      &quot;qty&quot;: &quot;q23&quot;
    }]);
  
    }
  
    ngOnInit() {
      this.addForm.get(&quot;items&quot;).valueChanges.subscribe(val =&gt; {
        if (val === true) {
          this.addForm.get(&quot;items_value&quot;).setValue(&quot;yes&quot;);
  
          this.addForm.addControl('rows', this.rows);
        }
        if (val === false) {
          this.addForm.get(&quot;items_value&quot;).setValue(&quot;no&quot;);
          this.addForm.removeControl('rows');
        }
      });
    }
  
    onAddRow() {
      this.rows.push(this.createItemFormGroup());
    }
  
    onRemoveRow(rowIndex:number){
      this.rows.removeAt(rowIndex);
    }
  
    createItemFormGroup(): FormGroup {
      return this.fb.group({
        name: null,
        description: null,
        qty: null
      });
    }
  
  }
  </code></pre>
  <p>My output:
  <a href="https://i.stack.imgur.com/Kt54S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kt54S.png" alt="Current output" /></a></p>
  <p>Expected output:
  <a href="https://i.stack.imgur.com/ODqVy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ODqVy.png" alt="Expected Output" /></a></p>
  <p>Also putting one <a href="https://stackblitz.com/edit/dynamically-add-rows-5k7zbe" rel="nofollow noreferrer">Stackblitz Example</a> for better reference.</p>