从 Angular table 中的特定列收集数据

Question

我有一个 table，它使用一个数组来填充它的行。 “值”列具有用于插入一些数据的输入字段。那么我需要知道的是如何在插入数据后收集“值”列上的所有数据？我可以使用“formGroup”吗，或者有类似的东西吗？请注意，行数总是根据数组大小而变化。非常感谢您的帮助。谢谢。

Component.ts 文件

export class AppComponent {
 members = [
   {
     dataLimit: 'Package 1: Voice',
     value: 0,
     uom: 'Minutes',
   },
   {
     dataLimit: 'Package 2: SMS',
     value: 0,
     uom: 'Units',
   },
 ];
}

HTML 文件

<div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Value</th>
        <th>Unit of Mesure</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let member of members">
        <td>{{ member.dataLimit }}</td>
        <td><input type="text" value="{{ member.value }}" /></td>
        <td>{{ member.uom }}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

你完全正确！我给你留下了代码运行一个获取 STACKBLITZ 中的值的表单，这样你就可以验证它并轻松地进行测试。

就像你说的，你可以使用 FormGroup 来实现，使用 Angular ReactiveForm:

首先，确保您已将 ReactiveForm 模块加载到您想要表单（在您的示例中为 AppComponent）的组件的模块（在您的示例中为 AppModule）：

import { ReactiveFormsModule } from '@angular/forms';  
@NgModule({  
imports: [  
 // other imports ...  
ReactiveFormsModule  
 ],  
})  
export class AppModule { }

在您的组件中，声明您的表单并“构建”它，为您的 table:

import { Component, OnInit, VERSION } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  form: FormGroup;

  members = [
    {
      dataLimit: 'Package 1: Voice',
      value: 0,
      uom: 'Minutes',
    },
    {
      dataLimit: 'Package 2: SMS',
      value: 0,
      uom: 'Units',
    },
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    const myFields = this.buildFormFieldsFormGroup();
    console.log('myFields: ', myFields);

    this.form = myFields;
  }

  private buildFormFieldsFormGroup(): FormGroup {
    const membersLength = this.members.length;
    let response: FormGroup = this.fb.group({ dummy: ['', []] });

    for (let i = 0; i < membersLength; i++) {
      response.addControl(`field${i}`, new FormControl());
    }
    console.log('response: ', response);

    return response;
  }
}

将表单和表单控件添加到您的 HTML:

<div>
  <form [formGroup]="form">
<table>
  <thead>
    <tr>
      <th></th>
      <th>Value</th>
      <th>Unit of Mesure</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let member of members, let i=index">
      <td>{{ member.dataLimit }}</td>
      <td><input type="text" value="{{ member.value }}" formControlName="field{{i}}" /></td>
      <td>{{ member.uom }}</td>
    </tr>
  </tbody>
</table>
</form>
</div>

如果您想测试它是否正常工作，请在 HTML:

FORM VALUE: {{ form.value | json }}

因此，当您在 table 中插入一些值时，您会在相应的字段中看到它的值，如下图所示：

您拥有表单中第一行的值，在其“field0”字段中，依此类推... （注意：我在表单中保留了 'dummy' 字段，因为我需要它来创建“种子”表单，以便快速响应......当我有时间时，我将改进创建表单的代码而不使用它，但现在，它不会打扰并且表格功能齐全）

从 Angular table 中的特定列收集数据

Collect data from a particular column in Angular table

angular

typescript

forms

html-table

formgroups