Show multiple Angular Form data in table

Question

I have made a sample form in Angular. I want to display the data of the form in a table below. When I submit the form, only those data that are given as an input gets updated. How can I save the previous form data in the table and again add another inputs in the form and show those data below the first one. It may sound complicated as it is hard for me to explain. Simply put, how can I enter mulitple form data and show that in table one after another.

Below are the code:

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<div class="container-fluid">
  <h2>Forms Task</h2>
  <form #f="ngForm" (ngSubmit)="onSubmit()">
    
    <div ngModelGroup = "userData"></div>
     <div class="form-group">
      <label>Name: </label>
      <input type="text" required name="Name" class="form-control" ngModel />
    </div>
<div class="form-group">
  <label>Email: </label>
  <input
    type="email"
    required
    class="form-control"
    ngModel
    name="email"
    email
    #email ="ngModel"
  />
  <p class="help-block" *ngIf="!email.valid && email.touched" >Please enter a valid email.</p>
</div>
<div class="form-group">
  <label>Phone Number: </label>
  <input
    required
    type="tel"
    class="form-control"
    name="phoneNumber"
    ngModel
  />
</div>
<div class="form-group">
  <label>Password</label>
  <input
    type="password"
    name="password"
    required
    class="form-control"
    ngModel
  />
    </div>
    <p>Gender:</p>
    <div class="mb-3" *ngFor="let gender of genders">
      <label>
    <input type="radio" name="gender" ngModel [value]="gender" />
    {{ gender }}
  </label>
</div>
<button class="btn btn-primary" type="submit"
  [disabled]="!f.valid">Submit</button>
</form>
<hr>
<div *ngIf ="submitted">
  <table>
  <thead>
  <th class="tableHead">Username</th>
  <th class="tableHead">Email</th>
  <th class="tableHead">Phone Number</th>
  <th class="tableHead">Password</th>
  <th class="tableHead">Gender</th>
  </thead>
   <tbody >
    <td>{{user.username}}</td>
    <td>{{user.email}}</td>
    <td>{{user.phoneNumber}}</td>
    <td>{{user.password}}</td>
    <td>{{user.gender}}</td>
  
   </tbody>
  </table>
  </div>
  </div>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Forms';
  @ViewChild('f') Forms: NgForm;
  genders = ['male', 'female']
  user = {
    username: "",
    email: "",
    phoneNumber: "",
    password: "",
    gender: "",
  }

  submitted = false;

  onSubmit() {
    this.submitted = true;
    this.user.username = this.Forms.value.Name;
    this.user.email = this.Forms.value.email;
    this.user.phoneNumber = this.Forms.value.phoneNumber;
    this.user.password = this.Forms.value.password;
    this.user.gender = this.Forms.value.gender;
    console.log(this.Forms.value.Name, this.Forms.value.email, this.Forms.value.phoneNumber, 
    this.Forms.value.password,this.Forms.value.gender)
    this.Forms.reset();
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DisplayTableComponent } from './display-table/display-table.component';

@NgModule({
  declarations: [
    AppComponent,
    DisplayTableComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Below is the stackblitz url of the project: https://stackblitz.com/edit/angular-ivy-mhl9ff

Answer 1

Technically it suppose to make HTTP call to back end and store data into database and on GET request we populate grid.

But if you are doing as a learning or testing purpose then you can store form data object into a class variable array and in template iterate and show form data.

All you need in your current implementation

export class AppComponent {
 formData = []; // add new array of form data where we store submitted form values
 title = 'Forms';
 .....

on submit push form values into formData

onSubmit() {
 this.formData.push(this.Forms.value)
 .....

And finally in template iterate over formData

<tbody >
 <tr *ngFor="let user of formData">
  <td>{{user.Name}}</td>
  <td>{{user.email}}</td>
  <td>{{user.phoneNumber}}</td>
  <td>{{user.password}}</td>
  <td>{{user.gender}}</td>
 </tr>
</tbody>

Updated your stackblitz example you can check that out.

Hope this works.