CODEWITHSUNDEEP
angular
Cyril
Cyril

Reputation: 47

How to retrieve data entered by user in inputs cell from my table, for every row dynamically added (row by row)?

I start on angular and I dont know how to recover the data of my inputs cells from my table. Knowing that each line is added dynamically. Should I use the two-way databinding or use the formGroup class in my array ?

This is my dashboard.component.html :

<!--Dashboard-->
<section class="section_4">
    <form ng-submit="addRow()">
        <div class="col text-center">
            <table class="table table-striped">
                <thead id="thead">
                    <tr id="head">
                        <th class="columnName">Action</th>
                        <th scope="col" *ngFor="let column of table.columns" class="columnName">{{ column.name }}</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                    <tr *ngFor="let dynamic of dynamicArray; let j = index;" id="myRow">
                        <td id="deleteCell" (click)="deleteRow(j)">
                            <img id="deleteIcon" src="../../assets/img/cancel.png" /><span>suppr</span>
                        </td>
                        <td [formGroup]="inputForm" (ngSubmit)="onSubmit()" *ngFor="let column of table.columns; let i = index; trackBy:trackByIndex;"><input type="{{ column.type }}" name="{{column.name}}_{{j}}" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
                        <td><button (click)="onSubmit()">submit</button></td>
                    </tr>
                    <tr>
                        <td id="addCell" (click)="addRow()">
                            <img id="addIcon" src="../../assets/img/add.png" /><span>ajouter</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br>
        <div class="col-md-12 text-center">
            <button type="button" class="btn btn-primary mb-2 text-center" (click)="downloadFile()">Envoyer</button>
        </div>
    </form>
</section>

This is dashboard.component.ts :

import { Component, OnInit } from '@angular/core';
import { ParameterService } from '../service/parameter.service';
import { Table } from '../model/table.model';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  table: Table;
  rows: Array<any> = [];
  dynamicArray: Array<any> = [];
  newDynamic: any = {};

  constructor(public ps: ParameterService) { }

  ngOnInit() {
    this.ps.getAllColumns().subscribe(res => {
      this.table = res;
      console.log(res);
    });
  }

  addRow() {
    this.newDynamic = { name: '', type: '', length: '', nullable: '', dataDefault: '' };
    this.dynamicArray.push(this.newDynamic);
    console.log(this.dynamicArray);
    return true;
  }

  deleteRow(i: number) {
    this.dynamicArray.splice(i, 1);
    console.log(this.dynamicArray);
    return true;
  }

  trackByIndex(index: number, obj: any): any {
    /* console.log(index);
     console.log(obj); */
    return index;
  }
}

Here is my result :

enter image description here

Upvotes: 0

Views: 75

Answers (1)

Marrds
Marrds

Reputation: 65

You should use the FormArray with FormControls. Every time you add a row you push a new FormControl in the FormArray and remove it respectively

Upvotes: 1

Related Questions