Angular 7 表单数组项导致调用堆栈超出错误

Question

我正在处理一个页面上的表单，该表单可以重复多次，基本上根据需要重复多次，以创建一个类似数据的列表，然后将其保存。我每次都使用 FormArray 重新创建项目。我以前使用过 FormArray 并且没有遇到任何问题，但是这次当我添加前两个表单项之后的任何表单项时，浏览器挂起并最终因错误 "call stack exceeded".

而崩溃

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

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

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

如果有人对可能的原因有任何建议，我很想听听，这已经困扰了我一段时间。

谢谢。

Answer 1

当您在 Angular 中使用表单数组时，您需要在模板中引用控件属性与值。目前还不完全清楚是什么导致了代码中的无限循环，但是当您引用该值时，如果某些原因导致该值发生变化，则会导致您的循环再次呈现。如果导致值更改的是设置的一部分，那么 Angular 更改检测将持续运行直到它运行退出调用堆栈。

见https://stackblitz.com/edit/angular-zezvfy and https://angular.io/guide/reactive-forms#step-4-displaying-the-form-array-in-the-template

Angular 7 表单数组项导致调用堆栈超出错误

Angular 7 Form Array item causes call stack exceeded error

formbuilder

angular