angular - 如何使用 Angular 中的表单更新表格

Question

我是 Angular 的初学者，我想构建一个如图所示的网页。

到目前为止，我设法创建了一个表单和一个表格，如您所见。

单击提交按钮时，我想更新表格并向其添加更多元素。我该怎么做？我的表单是模板驱动的表单！

这是我的组件代码

import { Component, OnInit } from '@angular/core';
import { EmployeeData } from '../employee-data.ts';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  model = new EmployeeData(123,"Aditya",10000,"Sales");
  headers = ["empId", "empName", "empSal", "empDep"];
  rows =         [
                   {empId:1001,empName:"Rahul",empSal:9000,empDep:"Java"},
                   {empId:1002,empName:"Sachin",empSal:19000,empDep:"OraApps"},
                   {empId:1003,empName:"Vikash",empSal:29000,empDep:"BI"},
                   ];
  onUpdate() {
    console.log(this.model);
    this.rows.push(this.model);
  }
  constructor() { }

  ngOnInit() {
  }

}

<div class="container">
    <h1>Employee Form</h1>
    <form #myform="ngForm" (ngSubmit)="onUpdate()">
      <div class="form-group">
        <label for="id">ID</label>
        <input type="text" [(ngModel)]="model.id" class="form-control" name="id" required>
      </div>
  
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" [(ngModel)]="model.name" class="form-control" name="name" required>
      </div>

      <div class="form-group">
        <label for="salary">Salary</label>
        <input type="text" [(ngModel)]="model.salary" class="form-control" name="salary" required>
      </div>

      <div class="form-group">
        <label for="department">Department</label>
        <input type="text" [(ngModel)]="model.department" class="form-control" name="department" required>
      </div>
    

      <button type="submit" class="btn btn-success">Submit</button>

    </form>
    {{model.id}} {{model.name}} {{model.salary}} {{model.department}} 
    <br>
    <br>
</div>
<div>
<table class="table table-bordered">
  <thead>
    <tr>
<th *ngFor = "let column of headers">
      {{column}}
</th>
    </tr>
</thead>
<tr *ngFor = "let row of rows">
    <td *ngFor = "let column of headers">
      {{row[column]}}
    </td>
</tr>
</table>
</div>
<br>
<br>
<div>
{{row[0]}}

</div>

标签： angulartypescript

Answer 1

您需要OnSubmit在表单上实现方法以捕获用户输入的值，如下所示：

<form #myform="ngForm" (ngSubmit)="onUpdate(myform)" novalidate>

然后在组件文件中捕获事件并执行以下操作：

 onUpdate(formObj) {
    let values = formObj.value;
    console.log(values);
    let obj: any = {
      empId: values.id,
      empName: values.name,
      empSal: values.salary,
      empDep: values.department
    };

    this.rows.push(obj);
    formObj.reset();

  }

这是供您参考的工作stackblitz： 演示