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

【问题标题】：Angular 5 form component causing Error: 'RangeError: Maximum call stack size exceeded 'Angular 5 表单组件导致错误：“RangeError：超出最大调用堆栈大小”
【发布时间】：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） defaultErrorLogger@core.js:1601 推../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError@core.js: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/Subscriber.js.SafeSubscriber.next@Subscriber.js:191 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next@Subscriber.js:129 推../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next@Subscriber.js:93 推../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53 推../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit@core.js:3713 （匿名）@core.js:4093 推../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 推../node_modules/zone.js/dist/zone.js.Zone.run@zone.js:138 推../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular@core.js: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 drainMicroTaskQueue@zone.js:602 推../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask@zone.js:500 调用任务@zone.js:1540 globalZoneAwareCallback@zone.js:1566

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

【问题讨论】：

标签： angular forms

【解决方案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 选择器。

【讨论】：