Angular loop over reactive form controls from HTML

Question

I have a HTML table that is creating a TR component based on an ngFor loop.

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

Currently, I am looping over the value of the form for these controls but I am trying to loop over the controls instead so I can pass them to the trcomponent.

Something like:

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

tasks is a form array and I am trying to loop over the array of controls it has so that I can pass it to the component.

I tried this let t of (<FormArray>intakeForm.controls['tasks'].controls) but it didn't work. Not sure that it can be done within the html like that.

End goal here is that I want to pass the form control on each iteration to the tr component.

joshrathke · Accepted Answer · 2017-12-19 16:28:39Z

2

Try using the get method within form groups to inspect specific controls. It's a much cleaner way of accessing controls within form groups.

Also using the methodology below allows you to "drop" into each element within the array and access the properties directly within your template since you are already "within" the correct formGroup in the FormArray. So no need for long prefixes with indices to define which element of the FormArray you are working on.

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

edited Dec 19, 2017 at 16:28

answered Dec 19, 2017 at 16:20

joshrathke

7,7847 gold badges25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SBB Over a year ago

Awesome thank you, this looks like it will work, wasn't aware of get on the forms

joshrathke Over a year ago

Yep, its really handy component-side as well.

Collectives™ on Stack Overflow

Angular loop over reactive form controls from HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related