在 table 中显示多个 Angular 表单数据

Question

我已经在 Angular 中制作了示例表格。我想在下面的table中显示表格的数据。当我提交表单时，只有那些作为输入给出的数据才会更新。如何将以前的表单数据保存在 table 中，然后再次在表单中添加另一个输入并将这些数据显示在第一个下方。这听起来可能很复杂，因为我很难解释。简单地说，如何输入多个表单数据并在table中依次显示。

代码如下：

应用-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 { }

下面是项目的 stackblitz url：https://stackblitz.com/edit/angular-ivy-mhl9ff

Answer 1

从技术上讲，它假设对后端进行 HTTP 调用并将数据存储到数据库中，然后根据 GET 请求填充网格。

但是如果您是出于学习或测试的目的，那么您可以将表单数据对象存储到 class 变量数组中，然后在模板中迭代并显示表单数据。

您当前实施所需的一切

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

提交时将表单值推送到 formData

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

最后在模板中迭代 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>

更新了您的 stackblitz 示例，您可以检查一下。

希望这有效。

在 table 中显示多个 Angular 表单数据

Show multiple Angular Form data in table

forms

angular

angular-forms