How to obtain value from dynamic table in Reactive Form?

Question

This is the snippet of my code, I can add new table row if needed, but how to take the value from table in ngFor? *Table is inside reactive form

<tr *ngFor="let row of tableRow; let i = index">
 <th scope="row" class="text-center">{{ i+1 }}</th>

 <td>
  <div class="form-group">
   <input type="text" class="form-control" id="supplierRequirementDesc" placeholder="e.g Wiring & Piping" formControlName="suppReqInput">
  </div>
 </td>

 <td>
  <div class="form-group">
   <select class="form-control" id="supplierUnitPcs" formControlName="suppUnitPcsInput">
    <option value="" disabled selected>Pcs</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>
  </div>
 </td>

 <td>
  <div class="form-group">
   <input type="text" class="form-control" id="supplierQuantityInput" placeholder="Quantity" formControlName="suppQuantityInput">
  </div>
 </td>
</tr>

</tbody>
</table>

<button type="button" class="btn btn-primary btn-form" (click)="addTableRow()">+ Add new item</button>
<button type="button" class="btn btn-primary btn-form" (click)="deleteRow()">- Remove item</button>

This is current data from console.log Title: abc Description: def Company based in: ghi Company Type: 2 Supplier Category: 4 Bond Value: 100 Verified: Yes Supplier Requirement: zbc Supplier Unit: 2 Supplier Quantity: 1257 Supplier Notes: xzx

check [this](https://stackoverflow.com/questions/50595070/angular-how-to-get-input-value-at-ngfor-loop-with-one-way-binding) . This may help you. — Sivaramakrishnan, Jul 17 '19 at 05:31
you have build your array using reactive form arrays https://angular.io/guide/reactive-forms#dynamic-controls-using-form-arrays — Soumya Gangamwar, Jul 17 '19 at 05:41

Chanaka Weerasinghe · Answer 1 · 2019-07-17T05:37:20.817

1

You can pass row

(click)="getTableRow(row)"

get value

getTableRow(row)
{
   console.log(row)
}

edited Jul 17 '19 at 05:37

answered Jul 17 '19 at 05:31

Chanaka Weerasinghe

5,404
2
26
39

He asks for getting form value. will row obj send form value too! – Sivaramakrishnan Jul 17 '19 at 05:36
@Sivaramakrishnan sorry i didnt get it what – Chanaka Weerasinghe Jul 17 '19 at 05:38
the reactive form control value is needed, not a row object values. – Sivaramakrishnan Jul 17 '19 at 05:44

Sivaramakrishnan · Answer 2 · 2019-07-17T05:49:02.127

0

I think for each iteration there is a separate form group and each form group has a separate form control object, that can reuse the class methods. so I suggest a small change to the previous answer, add below Html to all input tags.

//In HTML

(ngModelChange) = takeValues(this.suppUnitPcsInput.value);

//In component
takeValues(values){
    console.log(values)
}

And once the 'addRow' button is clicked, then row adding process can be done.

edited Jul 17 '19 at 05:49

answered Jul 17 '19 at 05:41

Sivaramakrishnan

350
3
18

Not quite understand with this. Currently, I'm only able to obtain value from only one row from the table even though I have added two rows, and this table is in form, I can obtain other value, no problem, my problem is how to obtain and store the value from the iterable table. Do I need to declare new formgroup? – Wan Aminur Rahman Jul 17 '19 at 07:59

How to obtain value from dynamic table in Reactive Form?

2 Answers2