HTMLからの反応性フォームコントロールの角ループ

Question

ngForループに基づいてTRコンポーネントを作成するHTMLテーブルがあります。

<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> 

現在、私はこれらのコントロールのフォームの値をループしていますが、私はtrコンポーネントに渡すことができますので、私が代わりにコントロールをループしようとしています。以下のような

何か：

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>