Add Dynamic value to input field inside a table in Angular 4

Question

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.

app.component.html:

    <table>
            <thead>
                <button (click)="onAddRow()" *ngIf="addForm.get('rows')">add row</button>
            </thead>
            <tbody>
                <tr *ngFor="let row of addForm.get('rows')?.controls;let index = index;">
          <!-- NOT WORKING with ngModel
          <td>name : <input [ngModel]="row.get('name')" [formControl]="row.get('name')"></td> -->
            <!-- NOT WORKING with value attribute
          <td>name : <input value="row.get('name')" [formControl]="row.get('name')">\</td> -->
          <td>
            name : <input  [formControl]="row.get('name')">
          </td>
          <td>
            description : <input [formControl]="row.get('description')">
          </td>
          <td>
            qty : <input [formControl]="row.get('qty')">
          </td>
          <td>
            <button (click)="onRemoveRow(index)">Remove</button>
          </td>
                </tr>
            </tbody>
        </table>

app.component.ts:

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([{
    "name": "Test Item",
    "description": "Dedsc",
    "qty": "q23"
  }]);

  }

  ngOnInit() {
    this.addForm.get("items").valueChanges.subscribe(val => {
      if (val === true) {
        this.addForm.get("items_value").setValue("yes");

        this.addForm.addControl('rows', this.rows);
      }
      if (val === false) {
        this.addForm.get("items_value").setValue("no");
        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
    });
  }

}

My output:

Expected output:

Also putting one Stackblitz Example for better reference.

vadimk7 · Accepted Answer · 2020-07-08 20:46:12Z

2

You don't need [ngModel] because you already working with reactive forms. These inputs are empty because you create each item form group with null values. If you have preloaded data you need to pass it as initial value for each control in createItemFormGroup method or update the value by methods setValue/patchValue of form array or appropriate form group.

answered Jul 8, 2020 at 20:46

vadimk7

8,4071 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

suisgrand · Accepted Answer · 2020-07-08 21:02:27Z

1

i am not sure if that will be exactly what you want, but check this one out: https://stackblitz.com/edit/dynamically-add-rows-k2lbkw

i replaced the formControl attribute with formControlName. Note the value property

<td>
     name : <input  formControlName="name" 
                   [ngModel]="row.get('name').value" >
</td>

added the name, description, qty to the form builder object.

    constructor(private fb: FormBuilder) {
        this.addForm = this.fb.group({
          items: [null, Validators.required],
          items_value: ['no', Validators.required],
          name: [null, Validators.required],
          description: [null, Validators.required],
          qty: [null, Validators.required]
        });
        this.rows = this.fb.array([]);
      }

and added some dummy values on the createItemFormGroup method

edited Jul 8, 2020 at 21:02

answered Jul 8, 2020 at 20:55

suisgrand

1141 silver badge6 bronze badges

2 Comments

Pritam Mullick Over a year ago

Thanks for the quick reply. The solution is fine, but just in case I have some previous values or an array of items inside the rows (formbuilder array), How do I use it? The functionality I require is I would load few data and list them in table and additionally people can add/ remove rows. On final submit, I will pass the rows array to API for update in backend.

Pritam Mullick Over a year ago

I followed this example (ng-run.com/edit/BmjgZeJJqYSPfbDDh5Kq?layout=1) and was able to achieve what I wanted. But I am curious about what was the issue in the first place (as in my question).

Collectives™ on Stack Overflow

Add Dynamic value to input field inside a table in Angular 4

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related