Приостановлено до возможного сбоя нехватки памяти (браузер Chrome) при импорте и присвоении большого количества значений угловой форме

Question

Я использую угловой материал stepper и использую функцию selectionChange ($ event), которая дает мне индекс mat-stepper-горизонтальное меню.

<mat-horizontal-stepper #stepper="matHorizontalStepper" linear="false"
[selectedIndex]="this.selectedIndex" 
(selectionChange)="selectionChange($event)">

и в этой функции я перебираю список значений и присваиваю значения угловой форме, если значения меньше 100, не происходит сбой браузера, но если значения больше 500, тосбой браузера кто-нибудь знает, как решить проблему?

selectIndex = 0
public selectionChange($event?: StepperSelectionEvent): void {  
    this.selectedIndex = $event.selectedIndex
    if (this.selectedIndex === 1) {
        for (let i = 0; i < this.forms.value.length; i++) {
            while (!this.forms.value[i]) {
                this.forms.addValue()
            }
            this.forms.setValue(this.forms.value[i])
        }
    }   
}