Показать несколько Angular данных формы в таблице - PullRequest
Новая
       74

Показать несколько Angular данных формы в таблице

0 голосов
/ 05 августа 2020

Я сделал образец бланка в Angular. Я хочу отобразить данные формы в таблице ниже. Когда я отправляю форму, обновляются только те данные, которые указаны в качестве входных. Как я могу сохранить данные предыдущей формы в таблице и снова добавить другие входные данные в форму и показать эти данные под первым. Это может показаться сложным, поскольку мне трудно объяснить. Проще говоря, как я могу ввести несколько данных формы и показать их в таблице один за другим.

Ниже приведен код:

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

Ниже stackblitz url проекта: https://stackblitz.com/edit/angular-ivy-mhl9ff

1 Ответ

1 голос
/ 05 августа 2020

Технически это предполагает выполнение HTTP-вызова на серверную часть и сохранение данных в базе данных, а по запросу GET мы заполняем сетку.

Но если вы делаете это в целях обучения или тестирования, вы можете сохранить объект данных формы в массив переменных класса и в шаблоне итерация и отображение данных формы.

Все, что вам нужно в вашей текущей реализации 

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

при отправке значений формы pu sh в 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 , вы можете это проверить.

Надеюсь, это сработает .

...