Angular 5 表单组件导致错误：“RangeError：超出最大调用堆栈大小”

Posted 2023-02-18

【中文标题】Angular 5 表单组件导致错误：“RangeError：超出最大调用堆栈大小”

【英文标题】：Angular 5 form component causing Error: 'RangeError: Maximum call stack size exceeded '

【发布时间】：2018-10-20 14:49:37

【问题描述】：

这是我的 form.ts 文件：

import  Component, OnInit  from '@angular/core';
import  FormGroup, FormControl, FormBuilder, Validators  from 
'@angular/forms';

 @Component(
 selector: 'form',
 templateUrl: './form.component.html',
 styleUrls: ['./form.component.scss']
 )
 export class FormComponent implements OnInit 
 formy;
 constructor(fb: FormBuilder) 
 this.formy = fb.group(
  name:['enter name here'],
  contact: fb.group(
    email:[],
    phone:[]
  ),
  topics: fb.array([])
  )
 

模板文件如下所示：

<div class="container">
  <form [formGroup]="formy">
    <input formControlName='name' />
      <div formGroupName='contact'>
        <input formControlName='email' type="text" />
        <input formControlName='phone' type="text" />
      </div>
    <ul>
      <li *ngFor='let topic of topics.controls'>
          topic.control
      </li>
   </ul>
   <button type='submit'>Submit</button>
  </form>
</div>
 <p>Works!</p>

AppModule 文件如下所示：

import  BrowserModule  from '@angular/platform-browser';
import BrowserAnimationsModule from '@angular/platform-browser/animations';
import  NgModule  from '@angular/core';
import  Root  from './app.component';
// import  RouterModule, Routes  from '@angular/router';
import  Routing  from './routing.module';
import  AngularMaterial  from './modules/angular-material.module';
// import  Forms  from './modules/forms.module';
import  FormComponent  from './form/form.component';
// import  RouterOutlet  from '@angular/router';
import  Home  from './home/home.component';
import   ReactiveFormsModule    from '@angular/forms';


@NgModule(
  declarations: [
    Root,
    FormComponent,
    Home
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AngularMaterial,
    // FormsModule,
    ReactiveFormsModule,
    // Forms,
    Routing
  ],
  providers: [],
  bootstrap: [Root]
)
export class AppModule  

当我没有组件时，路由工作正常，实际上它似乎适用于除表单组件之外的所有内容。 我收到的错误如下所示：

core.js:1601 ERROR 错误：未捕获（承诺中）：RangeError：超出最大调用堆栈大小 RangeError：超出最大调用堆栈大小 在 FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._updateValue (forms.js:3764) 在 FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2600) 在新的 FormGroup (forms.js:3348) 在 FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6009) 在新的 FormComponent (form.component.ts:12) 在 createClass (core.js:10156) 在 createDirectiveInstance (core.js:10041) 在 createViewNodes (core.js:11263) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._updateValue (forms.js:3764) 在 FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2600) 在新的 FormGroup (forms.js:3348) 在 FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6009) 在新的 FormComponent (form.component.ts:12) 在 createClass (core.js:10156) 在 createDirectiveInstance (core.js:10041) 在 createViewNodes (core.js:11263) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 resolvePromise (zone.js:814) 在 resolvePromise (zone.js:771) 在 zone.js:873 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:4062) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 在 drainMicroTaskQueue (zone.js:595) 在 ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用] (zone.js:500) 在调用任务（zone.js:1540）

当我将指令novalidate 添加到<form> 元素时（因为错误似乎与此有关）我收到不同的错误：

错误错误：未捕获（承诺中）：RangeError：超出最大调用堆栈大小 RangeError：超出最大调用堆栈大小 在 createViewNodes (core.js:11228) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 createViewNodes (core.js:11291) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 createViewNodes (core.js:11291) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 createViewNodes (core.js:11291) 在 createViewNodes (core.js:11228) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 createViewNodes (core.js:11291) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 createViewNodes (core.js:11291) 在 callViewAction (core.js:11579) 在 execComponentViewsAction (core.js:11498) 在 createViewNodes (core.js:11291) 在 resolvePromise (zone.js:814) 在 resolvePromise (zone.js:771) 在 zone.js:873 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) 在 Object.onInvokeTask (core.js:4062) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) 在 drainMicroTaskQueue (zone.js:595) 在 ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [作为调用] (zone.js:500) 在调用任务（zone.js:1540） [e-mail]:1601 推../node_modules/@angular/core/fesm5/[e-mail]:1650 下一个@core.js:4736 schedulerFn @ core.js:3721 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @Subscriber.js:253 push../node_modules/rxjs/_esm5/internal/[e-mail]:191 push../node_modules/rxjs/_esm5/internal/[e-mail]:129 推../node_modules/rxjs/_esm5/internal/[e-mail]:93 推../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53 推../node_modules/@angular/core/fesm5/[e-mail]:3713 （匿名）@core.js:4093 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 推../node_modules/zone.js/dist/[e-mail]:138 推../node_modules/@angular/core/fesm5/[e-mail]:4030 onHandleError @ core.js:4093 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392 push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154 _loop_1 @ zone.js:677 api.microtaskDrainDone @ zone.js:686 [e-mail]:602 推../node_modules/zone.js/dist/[e-mail]:500 调用任务@zone.js:1540 [e-mail]:1566

我阅读了所有与此相关的帖子并没有找到解决方案，貌似这是一个非常简单的表格，它是几个教程的确切代码，我对表格没有深入的了解但真的不知道'不明白为什么这不起作用。

【参考方案1】：

Root 组件用于引导应用程序。这不应该在declarations 数组中。

从声明数组中删除它：

declarations: [
  Root,  ---->  remove this
  FormComponent,
  Home
],

【讨论】：

执行此操作时出现以下错误：“未捕获的错误：组件根不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。”

【参考方案2】：

这是因为你的组件 form.ts 使用了 HTML5 标签的模板。由于选择器是一个 HTML 标记，因此它处于无限递归中。

尝试将选择器从“form”更改为“custom-form”，它肯定会起作用。

【参考方案3】：

这是因为选择器form。将其更改为app-form。

您正在使用您自己的form 组件中的内置form 标签。这将导致递归。

您的自定义选择器已覆盖内置的 form 选择器。