title: Show multiple Angular Form data in table
body: <p>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.</p>
  <p>Below are the code:</p>
  <p>app-routing.module.ts:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
  ];
  
  @NgModule({
  imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>app.component.html</p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
    &lt;h2&gt;Forms Task&lt;/h2&gt;
    &lt;form #f=&quot;ngForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
      
      &lt;div ngModelGroup = &quot;userData&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;Name: &lt;/label&gt;
        &lt;input type=&quot;text&quot; required name=&quot;Name&quot; class=&quot;form-control&quot; ngModel /&gt;
      &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label&gt;Email: &lt;/label&gt;
    &lt;input
      type=&quot;email&quot;
      required
      class=&quot;form-control&quot;
      ngModel
      name=&quot;email&quot;
      email
      #email =&quot;ngModel&quot;
    /&gt;
    &lt;p class=&quot;help-block&quot; *ngIf=&quot;!email.valid &amp;&amp; email.touched&quot; &gt;Please enter a valid email.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label&gt;Phone Number: &lt;/label&gt;
    &lt;input
      required
      type=&quot;tel&quot;
      class=&quot;form-control&quot;
      name=&quot;phoneNumber&quot;
      ngModel
    /&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label&gt;Password&lt;/label&gt;
    &lt;input
      type=&quot;password&quot;
      name=&quot;password&quot;
      required
      class=&quot;form-control&quot;
      ngModel
    /&gt;
      &lt;/div&gt;
      &lt;p&gt;Gender:&lt;/p&gt;
      &lt;div class=&quot;mb-3&quot; *ngFor=&quot;let gender of genders&quot;&gt;
        &lt;label&gt;
      &lt;input type=&quot;radio&quot; name=&quot;gender&quot; ngModel [value]=&quot;gender&quot; /&gt;
      {{ gender }}
    &lt;/label&gt;
  &lt;/div&gt;
  &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;
    [disabled]=&quot;!f.valid&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;hr&gt;
  &lt;div *ngIf =&quot;submitted&quot;&gt;
    &lt;table&gt;
    &lt;thead&gt;
    &lt;th class=&quot;tableHead&quot;&gt;Username&lt;/th&gt;
    &lt;th class=&quot;tableHead&quot;&gt;Email&lt;/th&gt;
    &lt;th class=&quot;tableHead&quot;&gt;Phone Number&lt;/th&gt;
    &lt;th class=&quot;tableHead&quot;&gt;Password&lt;/th&gt;
    &lt;th class=&quot;tableHead&quot;&gt;Gender&lt;/th&gt;
    &lt;/thead&gt;
     &lt;tbody &gt;
      &lt;td&gt;{{user.username}}&lt;/td&gt;
      &lt;td&gt;{{user.email}}&lt;/td&gt;
      &lt;td&gt;{{user.phoneNumber}}&lt;/td&gt;
      &lt;td&gt;{{user.password}}&lt;/td&gt;
      &lt;td&gt;{{user.gender}}&lt;/td&gt;
    
     &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>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: &quot;&quot;,
      email: &quot;&quot;,
      phoneNumber: &quot;&quot;,
      password: &quot;&quot;,
      gender: &quot;&quot;,
    }
  
    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();
    }
  
  }
  </code></pre>
  <p>app.module.ts</p>
  <pre><code>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 { }
  </code></pre>
  <p>Below is the stackblitz url of the project: <a href="https://stackblitz.com/edit/angular-ivy-mhl9ff" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-mhl9ff</a></p>