I am building a quite complex too with many interconnected pieces so I opted for reactive forms. In sum, I have an initial input for x Days, which then dynamically builds other parts of the form by adding controls such that the output will be as such for 1 part of the form (so 1 control for each day) Form Example I need this because it is used in a material table in a further step which has to show the form in a daily view with a set of inputs as such. Table Example <ng-container matColumnDef="attendees"> <th mat-header-cell *matHeaderCellDef># of Attendees</th> <td mat-cell *matCellDef="let element; let i = index"> <ng-container [formGroupName]="globalSelectedDay"> <ng-container [formGroupName]="'dailyData'"> <mat-form-field [formGroupName]="'day' + (i + 1)" class="no-hint h-40 full-width" > <input matInput type="number" onkeydown="return event.keyCode !== 69 && event.keyCode !== 189" formControlName="attendees" placeholder="number of attendees" /> </mat-form-field> </ng-container> </ng-container> </td> </ng-container> The issue is when i type on the initial input a very big amount of days, the page completely freezes (seems as if building a huge DOM) and the console is spammed by warnings of the following. [Violation] Added non-passive event listener to a scroll-blocking wheel event. Consider marking event handler as 'passive' to make the page more responsive. Am i missing something? Is this just how it is and I have to try to find other solutions? Any ideas on how to try to optimize this? Maybe by building the huge dom at the start and just keeping it disabled? Any idea on how to debug and find where the slowdown happens? I have optimized the functions inside the valueChanges of the inputs so they are extremely fast. Continue reading...
