How to get the table input values and create key value in Angular

Question

Hi what i am trying is i am trying to create a dynamic table with input using row span here

requirement:

I have 2 fields in the table username & email * inputs . I can enter what ever text i want inputs. after that when ever i press getTableValue button then i need to retrieve all the inputs values and along with that corresponding username value and i need to create json here username will be the key and what ever i enter in that input will be the values.

suppose my username is bret and in the input i entered avenger and in json it needs to be

{
  "bret":"avenger"
}

I tried the reactive form but unable to get the values below is my code

<div>
  <button type="button" (click)="getTableValue()">Get Value </button>
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>username</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of dynamicData; let i = index">
        <td>{{ data.username }}</td>
        <td>{{ data.email }}</td>
        <td [attr.rowspan]="5" *ngIf="i % 5 == 0">
          <input type="text" />
        </td>
      </tr>
    </tbody>
  </table>
</div>

below is my stackblitz url ==> https://stackblitz.com/edit/angular-ivy-drfozo?file=src/app/app.component.ts

Carlos · Accepted Answer · 2022-08-30 18:31:03Z

1

You can add the ngModel in the field

<td [attr.rowspan]="5" *ngIf="i % 5 == 0">
   <input type="text"  [(ngModel)]="data[ data.username.toLowerCase() ]"/>
</td>

This is return in console.log

0: Object
  bret: "test"
  email: "[email protected]"
  id: 1
  name: "Leanne Graham"
  username: "Bret"
__proto__: Object
1: Object
  email: "[email protected]"
  id: 2
  name: "Ervin Howell"
  username: "Bret"
__proto__: Object
2: Object
  email: "[email protected]"
  id: 3
  name: "Clementine Bauch"
  username: "Bret"
__proto__: Object
3: Object
  email: "[email protected]"
  id: 4
  name: "Patricia Lebsack"
  username: "Bret"
__proto__: Object
4: Object
  email: "[email protected]"
  id: 5
  name: "Chelsey Dietrich"
  username: "Bret"
__proto__: Object
5: Object
  delphine: "test1"
  email: "[email protected]"
  id: 6
  name: "Mrs. Dennis Schulist"
  username: "Delphine"
__proto__: Object
6: Object
  email: "[email protected]"
  id: 7
  name: "Kurtis Weissnat"
  username: "Delphine"
__proto__: Object
7: Object
  email: "[email protected]"
  id: 8
  name: "Nicholas Runolfsdottir V"
  username: "Delphine"
__proto__: Object
8: Object
  email: "[email protected]"
  id: 9
  name: "Glenna Reichert"
  username: "Delphine"
__proto__: Object
9: Object
  email: "[email protected]"
  id: 10
  name: "Clementina DuBuque"
  username: "Delphine"

[UPDATE]

If you want only these updated values

You can get like this:

const yourData = this.dynamicData.filter(d => Object.keys(d).length == 5)

I hope it helps

Here is demo

edited Aug 30, 2022 at 18:31

answered Aug 30, 2022 at 17:06

Carlos

2371 gold badge5 silver badges19 bronze badges

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

7 Comments

Madpop Over a year ago

this is not correct what i need to in input what ever i enter those values i need to get and along with that user name of that particular row

Carlos Over a year ago

The username is input, correct?

Madpop Over a year ago

that is correct we dont need all these just [ {bret: "test"}, {delphine: "test1"}] like this can we remove all the other data from the log ?

Carlos Over a year ago

So, you can use the filter from array and get only this data

Madpop Over a year ago

How ? bcoz there is no specific key right ? how can i get [ {bret: "test"}, {delphine: "test1"}]

|

Collectives™ on Stack Overflow

How to get the table input values and create key value in Angular

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related