Mastering Angular Reactive Forms/

...

/

Solution: Dynamic Form Sections

Solution: Dynamic Form Sections

Let's analyze a possible solution for the given assignment about FormArrays.

We'll cover the following...

Template

The proposed exercise required a solution similar to the address example shown in the previous lesson. When working with FormArrays, the most crucial part is to use the proper directives before (FormArrayName) and inside each loop cycle (FormGroupName).

HTML
...
<div formArrayName="participants">
  <div *ngFor="let participant of participants.controls; let i = index">
    <div [formGroupName]="i" class="participants-group">
    ...
    
    </div>
  </div>
</div>

The nested participants form control is assigned to the ...