Angular实现表单数据点击添加至表格行功能问询

一、组件类（xxx.component.ts）核心逻辑 #

先定义用户数据结构，绑定表单输入值，维护用户列表数组，编写添加逻辑：

import { Component } from '@angular/core';

// 定义用户数据结构
interface User {
  Name: string;
  Lname: string;
  Email: string;
  Role: string;
  User: string; // 可根据需求设为自动生成或表单输入
}

@Component({
  selector: 'app-user-manager',
  templateUrl: './user-manager.component.html',
  styleUrls: ['./user-manager.component.css']
})
export class UserManagerComponent {
  // 绑定表单输入的临时用户对象
  newUser: User = {
    Name: '',
    Lname: '',
    Email: '',
    Role: '',
    User: ''
  };

  // 用户列表数组，用于渲染表格
  addUser: User[] = [];

  add() {
    // 可选：表单必填项验证
    if (!this.newUser.Name || !this.newUser.Lname || !this.newUser.Email || !this.newUser.Role) {
      alert('请填写所有必填字段');
      return;
    }

    // 深拷贝临时对象添加到列表，避免引用关联问题
    this.addUser.push({...this.newUser});

    // 清空表单输入
    this.newUser = {
      Name: '',
      Lname: '',
      Email: '',
      Role: '',
      User: ''
    };
  }
}

二、模板（xxx.component.html）修正优化 #

修复原模板重复表头的问题，给表单字段加双向绑定，把点击事件绑定到按钮本身：

<!-- 表单部分：添加双向绑定与必填项标记 -->
<form>
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" [(ngModel)]="newUser.Name" name="name" required>
  </div>
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" class="form-control" [(ngModel)]="newUser.Lname" name="lastName" required>
  </div>
  <div class="form-group">
    <label>Email Address</label>
    <input type="email" class="form-control" [(ngModel)]="newUser.Email" name="email" required>
  </div>
  <div class="form-group">
    <label>Role</label>
    <input type="text" class="form-control" [(ngModel)]="newUser.Role" name="role" required>
  </div>
  <!-- 可选：手动输入用户名的字段 -->
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" [(ngModel)]="newUser.User" name="username">
  </div>

  <button type="button" class="btn btn-primary btn-sm" id="add_btn" (click)="add()">
    <div class="row">
      <div class="col"><img src="assets/images/add.png" id="add_icon"></div>
      <div class="col" id="add">Add user</div>
    </div>
  </button>
</form>

<div class="row">
  <div class="col">
    <h4>User list</h4>
  </div>
</div>

<!-- 表格部分：仅在数据行循环，表头只显示一次 -->
<table class="table table-striped">
  <tr>
    <th id="name">Name</th>
    <th>Last name</th>
    <th>Email address</th>
    <th id="role">Role</th>
    <th id="user">User</th>
    <th id="action">Actions</th>
  </tr>
  <!-- 循环渲染用户数据行 -->
  <tr *ngFor="let user of addUser">
    <td>{{user.Name}}</td>
    <td>{{user.Lname}}</td>
    <td>{{user.Email}}</td>
    <td>{{user.Role}}</td>
    <td>{{user.User}}</td>
    <td>
      <!-- 可选：添加删除按钮 -->
      <button class="btn btn-danger btn-sm" (click)="addUser.splice(addUser.indexOf(user), 1)">Delete</button>
    </td>
  </tr>
</table>

三、必要配置 #

在模块（如AppModule）中导入FormsModule，否则双向绑定[(ngModel)]无法生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { AppComponent } from './app.component';
import { UserManagerComponent } from './user-manager/user-manager.component';

@NgModule({
  declarations: [
    AppComponent,
    UserManagerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键注意点 #

• 原模板把*ngFor绑定在<table>上会重复生成表头，必须移到数据行<tr>上。
• 用{...this.newUser}深拷贝对象，避免修改临时表单值时影响已添加的用户数据。
• 可根据需求扩展表单验证规则或添加编辑功能。

内容的提问来源于stack exchange，提问作者vishnuanil123