angular - Angular 7 Form Array 项目导致调用堆栈超出错误

问题描述

我正在处理一个页面上的表单，该表单可以重复多次，基本上是创建一个类似数据列表然后保存所需的多次。我每次都使用 FormArray 重新创建项目。我之前使用过 FormArray 并且没有遇到任何问题，但是这次当我添加前两个之后出现的任何表单项时，浏览器挂起并最终崩溃并出现错误“调用堆栈超出”。

显然它试图在循环中的某个时间做，但我不知道是什么。FormArray 原则上在此页面上工作，就好像我只有第一次项目没有问题一样。仅尝试添加更多控件会强制循环。

这是我在数组中指定控件并添加第一个控件的代码，因此第一组控件出现在页面上

表格.ts：

this.sessionsForm = this.formBuilder.group({
        sessions: this.formBuilder.array([])
    });
    const sessions = this.sessionsForm.controls.sessions as FormArray;
    sessions.push(this.formBuilder.group({
        'session_id': [null],
        'title': [null, Validators.required],
        'tutor': [null, Validators.required],
        'date': [null, Validators.required],
        'hour': [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(2)])],
        'minute': [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(2)])],
        'meridiem': [null, Validators.required],
        'editor': [null],
        'editors': [null],
        'type': [null, Validators.required],
        'location': [null, Validators.required],
        'enabled': [null],
        'attendees': [null],
        'feature_image': [null],
        'duration': [null, Validators.required],
        'participants':[null],
        'learner_info': [null],
        'delivery_info':[null],
        'tutor_resources': [null],
        'is_template': [null, Validators.required]
    }));

form.html：为简洁起见，此处仅显示前两个有效的控件，然后显示随后的两个。在前两个之后添加哪个控件并不重要，循环会发生。好吧，这并不完全正确。有时我可以显示另一个控件，但添加第四个控件会导致循环，但有时第三个控件确实有效，然后再次停止工作，我又回到了循环崩溃。

<form [formGroup]="sessionsForm">
                    <div class="array_section" *ngIf="sessionsForm.controls.sessions">
                        <div class="array_item" formArrayName="sessions" *ngFor="let session of sessionsForm.controls.sessions?.value; let i = index">
                            <ng-container [formGroupName]="i">
                                <div class="left-container">
                                    <div class="wrapper"> 
                                        <div class="form__row">
                                            <div class="form__col">
                                                <div class="form__field">
                                                    <mat-form-field class="form__input">
                                                        <input matInput placeholder="Parent stream" value="{{parentStream.title}}" disabled>
                                                    </mat-form-field>
                                                </div>
                                            </div>
                                            <div class="form__col">
                                                <div class="form_field">
                                                    <mat-checkbox class="form__input" formControlName="is_template">Create a template</mat-checkbox>
                                                </div>
                                            </div> 
                                        </div> 

                                        <div class="form__row">
                                            <div class="form__col">
                                                <div class="form__field">
                                                    <mat-form-field class="form__input">
                                                        <input placeholder="Session Title" matInput formControlName="title" class="form__input">
                                                    </mat-form-field>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- <div class="form__row">
                                            <div class="form__col">
                                                <div class="form__field">
                                                    <mat-form-field class="form__input">
                                                        <mat-select placeholder="Duration (minutes)" formControlName="duration">
                                                            <mat-option *ngFor="let duration of durations" value="{{ duration }}">{{ duration }}</mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                            </div>
                                            <div class="form__col">
                                                <div class="form__field">
                                                    <mat-form-field class="form__input">
                                                        <mat-select placeholder="Type" formControlName="type">
                                                            <mat-option *ngFor="let type of types" value="{{ type }}">{{ type }}</mat-option>
                                                        </mat-select>
                                                    </mat-form-field>
                                                </div>
                                            </div>
                                        </div> -->

如果有人对我很想听听它的原因有什么建议，这已经让我难过一段时间了。

谢谢。

标签： angularformbuilder

angular - Angular 7 Form Array 项目导致调用堆栈超出错误

问题描述

解决方案

推荐阅读