angular - 提交动态生成的内容作为表单的一部分

Question

我目前正在尝试从我的表单中的表格提交同步生成的内容。我正在使用 Angular 6 生成表单，但对于我的一生，我无法弄清楚如何在 FormGroup 声明中表示表单的动态内容。

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";

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

  accountDetails = [{
    id: 1,
    name: 'Account 1',
    amountHeld: 5453.7,
    amountToTransfer: 0

  },
  {
    id: 2,
    name: 'Account 2',
    amountHeld: 5644.7,
    amountToTransfer: 0

  },
  {
    id: 3,
    name: 'Account 3',
    amountHeld: 42465.7,
    amountToTransfer: 0

  }
  ,{
    id: 4,
    name: 'Account 4',
    amountHeld: 1434.7,
    amountToTransfer: 0

  }
  ]

  transferDetailsForm = new FormGroup({
    transferType: new FormControl("", [Validators.required]),
  });


}


<form name="transferDetailsForm" [formGroup]="transferDetailsForm">
    <div class="row">
        <div class="form-group">

            <label class="required">Choose category of transfer </label>&nbsp;

              <div id="rbTradeCategorySelect" class="form-group" style="padding-left: 20px;">

                <label for="rbMove" class="radio-inline">
                  <input type="radio" value="SaleOrGift" (change)="changeTransferCategory($event)" formControlName="transferType" click-capture />
                  Sale or gift
                </label>&nbsp;

                <label for="rbLease" class="radio-inline">
                  <input type="radio" radio value="Lease" (change)="changeTransferCategory($event)" formControlName="transferType" click-capture />
                  Lease
                </label>&nbsp;
              </div>
            </div>
          </div>
          <table>
            <thead>
              <th>Account Name </th>
              <th>Account Balance</th>
              <th>Amount to Transfer</th>
            </thead>
            <tbody>
              <tr *ngFor='let a of accountDetails'>
                <td>{{a.name}}</td>
                <td>{{a.amountHeld}}</td>
                <td>
                  <input type="hidden" placeholder="{{a.id}}"/>
                  <input type="text" placeholder="{{a.amountToTransfer}}"/>
                </td>
              </tr>
            </tbody>
          </table>
   <button id="btnSubmit" class="btn btn-success btn-lg" (ngSubmit)="transferDetailsForm.valid"
                    click-capture>
                    Submit
                  </button>      
</form>

我创建了以下表格模型，希望有人可以帮助我。

https://stackblitz.com/edit/angular-yzumze

Answer 1

正如我在评论中提到的，你必须使用FormArray它。有关何时使用FormArrayvs的更详细讨论FormGroup，请查看：何时使用 FormGroup 与 FormArray？

现在，检查：

app.component.ts

...
...
...
transferDetailsForm: FormGroup;
results: Array<string>;

constructor(
  private formBuilder: FormBuilder,
) { }

ngOnInit() {
  this.transferDetailsForm = this.formBuilder.group({
    amountToTransferArray: this.buildFormArray(),
  });
}

buildFormArray(): FormArray {
  let arr = [];
  this.accountDetails.forEach(details => {
    arr.push([details.amountToTransfer, [Validators.required]]);
  });

  return this.formBuilder.array(arr);
}

get amountToTransferArray(): FormArray {
  return this.transferDetailsForm.get('amountToTransferArray') as FormArray;
}

onSubmit() {
  const formModel = this.transferDetailsForm.value;
  this.results = formModel;
}

app.component.html

<table>
  <thead>
    <th>Account Name </th>
    <th>Account Balance</th>
    <th>Amount to Transfer</th>
  </thead>
  <tbody>
    <tr *ngFor="let a of accountDetails; let index = index">
      <td>{{ a.name }}</td>
      <td>{{ a.amountHeld }}</td>
      <td>
        <input type="hidden" placeholder="{{ a.id }}"/>
        <input type="number" [formControl]="amountToTransferArray.controls[index]"/>
      </td>
    </tr>
  </tbody>
</table>
<button id="btnSubmit" class="btn btn-success btn-lg"
  (click)="onSubmit()">
  Submit
</button>

我已经分叉了您的 stackblitz 并在此处对其进行了修改：https ://stackblitz.com/edit/angular-ib3kth