来自HTML的反应式表单控件上的Angular循环

Question

我有一个HTML表，正在创建一个基于ngFor循环的TR组件。

<tbody>
  <tr *ngFor="let t of intakeForm.controls['tasks'].value let i = index; trackBy:trackByIndex" [taskTR]="t" [ui]="uiOptions" [tasks]="configuredTasks" [intakeForm]="intakeForm"></tr>
</tbody>

目前，我正在循环这些控件的表单的值，但我试图循环控件，所以我可以将它们传递给trcomponent。

就像是：

let t of intakeForm.controls['tasks'].controls

tasks是一个表单数组，我试图遍历它所拥有的控件数组，以便我可以将它传递给组件。

我尝试了这个let t of (<FormArray>intakeForm.controls['tasks'].controls)但它没有用。不确定它是否可以在html中完成。

这里的最终目标是我想将每次迭代的表单控件传递给tr组件。

Answer 1

尝试在表单组中使用get方法来检查特定控件。这是一种更清晰的方式来访问表单组中的控件。

同样使用下面的方法允许您“放入”数组中的每个元素并直接在模板中访问属性，因为您已经在FormArray中的正确formGroup“内”。因此，不需要带索引的长前缀来定义您正在处理的FormArray的哪个元素。

<ng-container formArrayName="tasks">
    <tr [formGroupName]="i" *ngFor="let task of intakeForm.get('tasks').controls; let i=index">
        <input type="text" formControlName="taskName" />
    </tr>
</ng-container>