Collect data from a particular column in Angular table-CodePudding

I have a table that uses an array to populate its rows. The ‘Value’ column has input fields to insert some data. So what I need to know is how can I collect all the data on ‘Value’ column after inserting data? Can I use ‘formGroup’, or is there anything similar to that? Please note, the number of rows always change based on the array size. Really appreciate your help. Thank you.

Component.ts file

export class AppComponent {
 members = [
   {
     dataLimit: 'Package 1: Voice',
     value: 0,
     uom: 'Minutes',
   },
   {
     dataLimit: 'Package 2: SMS',
     value: 0,
     uom: 'Units',
   },
 ];
}

HTML file

<div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Value</th>
        <th>Unit of Mesure</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let member of members">
        <td>{{ member.dataLimit }}</td>
        <td><input type="text" value="{{ member.value }}" /></td>
        <td>{{ member.uom }}</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

You are absolutely right! I leave you the code running with a form getting the values in

You have the value of the first row in the form, in its "field0" field, and so on... (NOTE: I leave the 'dummy' field in the form because I needed it to create the "seed" form, to give you a quick response... When I get time I will improve the code creating the form without using it, but for now, it doesn't bother and the form is fully functional)