Как обновить таблицу, используя форму в 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>

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();

  }

Вот рабочий стек для вашей справки: Демо