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

我目前正在尝试从表单中的表提交语法生成的内容。我正在使用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>

从'@angular/core'导入{Component}；
从“@angular/forms”导入{FormControl，FormGroup，Validators}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
accountDetails=[{
id:1，
名称：“帐户1”，
持有金额：5453.7，
转移金额：0
},
{
id:2，
名称：'帐户2'，
持有金额：5644.7，
转移金额：0
},
{
id:3，
姓名：‘帐户3’，
持有金额：42465.7，
转移金额：0
}
,{
id:4，
姓名：‘帐户4’，
持有金额：1434.7，
转移金额：0
}
]
transferDetailsForm=新表单组({
transferType:new FormControl（“，[Validators.required]），
});
}
选择转移类别
出售或赠送
租赁
帐户名
账户余额
转帐金额
{{a.name}}
{{a.amounthold}}
提交

我已经创建了我的形式，希望有人能帮助我以下模型

---

正如我在评论中提到的那样，您必须使用

格式阵列。有关何时使用
FormArray
vs
FormGroup
的更详细讨论，请查看：

现在，请查看：

应用程序组件.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;
}

。。。
...
...
TransferDetails表单：FormGroup；
结果：阵列；
建造师(
私有formBuilder:formBuilder，
) { }
恩戈尼尼特（）{
this.transferDetailsForm=this.formBuilder.group({
AmountToTransferray:this.buildFormArray（），
});
}
buildFormArray（）：FormArray{
设arr=[]；
this.accountDetails.forEach（details=>{
arr.push（[details.amountToTransfer，[Validators.required]]）；
});
返回此.formBuilder.array（arr）；
}
获取AmountToTransferray（）：FormArray{
将此.transferDetailsForm.get（'amountToTransferArray'）作为FormArray返回；
}
onSubmit（）{
const formModel=this.transferDetailsForm.value；
这个结果=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>


帐户名
账户余额
转帐金额
{{a.name}}
{{a.amounthold}}
提交

我已经将您的stackblitz分叉并在此处进行了修改：
如果我错了，请纠正我，因此本质上您希望将
accountDetails
的值设置为
transferDetailsForm
的初始值？不完全是，我想知道如何将帐户信息（动态）作为表单组的一部分，这将使我能够在提交时读取任何用户提交的值，目前它不是我的FormGroup（）声明的一部分。啊，您可能希望使用
FormArray
，尤其是当您的
accountDetails
数组大小增加或缩小时——请参阅下面的答案