CODEWITHSUNDEEP
angular
Wan Aminur Rahman
Wan Aminur Rahman

Reputation: 11

How to obtain value from dynamic table in Reactive Form?

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

Upvotes: 1

Views: 248

Answers (2)

Sivaramakrishnan
Sivaramakrishnan

Reputation: 392

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.

Upvotes: 0

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

You can pass row

(click)="getTableRow(row)"

get value

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

Upvotes: 1

Related Questions