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

Question

这是我的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 { }

当我没有组件时，路由工作正常，事实上，除了表单组件之外，它似乎可以处理所有内容。我收到的错误如下所示：

果心js:1601错误错误：未捕获（在promise中）：RangeError：最大调用堆栈大小超过RangeEr错误：在FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup处超过最大调用堆栈尺寸_updateValue（forms.js:3764）位于FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl。在FormBuilder.push../node_modules/@angulal/forms/fesm5/forms.js.FormBuilder的新FormGroup（forms.js:3348）中更新ValueAndValidity（forms.js:2600）。在FormGroup.push../node_modules/@angulal/forms/fesm5/forms.js.FormGroup处的callViewAction（core.js:11579）处的createDirectiveInstance（core.js:10041）处的新建FormComponent（form.component.ts:12）处的组（forms.js:6009）_updateValue（forms.js:3764）位于FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl。在FormBuilder.push../node_modules/@angulal/forms/fesm5/forms.js.FormBuilder的新FormGroup（forms.js:3348）中更新ValueAndValidity（forms.js:2600）。组（forms.js:6009）在新的FormComponent（form.component.ts:12）在createClass（core.js:10156）在creteDirectiveInstance（core.js:10041）在creatViewNodes（core.js:11263）在callViewAction（core.js:11579）在execComponentViewsAction（core.js:11498）在resolvePromise（zone.js:814）在reselvePromisse（zone.js:771）在区域。js:873，位于ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDeligate。在Object上调用任务（zone.js:421）。ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDeligate上的onInvokeTask（core.js:4062）。在zone.push../node_modules/zone.js/dist/zone.js.zone调用任务（zone.js:420）。在ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask的drainMicroTaskQueue（zone.js:595）上运行任务（zone.js:188）。在invokeTask（zone.js:1540）处调用任务[as-invoke]（zone.js:500）

当我添加到＜code＞

错误错误：Uncaught（in promise）：RangeError：最大调用堆栈大小超过RangeEr错误：最大调用栈大小超过createViewNodes（core.js:11228），callViewAction（core.js:11579），execComponentViewsAction（core.js:11498），createViewNodes（core.js:11291），call ViewAction，core.js:11579）在callViewAction（core.js:11579）处的execComponentViewsAction（core.js:11498）处的createViewNodes（core.js:11291）处的callViewConnection（core.js:11228）处的eccComponent ViewsActiion（core.js:11579（core.js:11579）在resolvePromise（zone.js:814）的resolveBromise（分区.js:771）的createViewNodes（core.js:11291）的execComponentViewsAction（core.js:11498）上。js:873，位于ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDeligate。在Object上调用任务（zone.js:421）。ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDeligate上的onInvokeTask（core.js:4062）。在zone.push../node_modules/zone.js/dist/zone.js.zone调用任务（zone.js:420）。在ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask的drainMicroTaskQueue（zone.js:595）上运行任务（zone.js:188）。invokeTask（zone.js:1540）defaultErrorLogger@core处的invoke任务[as-invoke]（zone.js:500）。js:1601推送../node_modules/@angular/core/fesm5/core.js.ErrorHandler。handleError@core。js:1650下一个@core。js:4736调度器Fn@core。js:3721推送../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber__tryOrUnsub@订阅服务器。js:253推送../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber。next@订阅服务器。js:191推送../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber_next@订阅服务器。js:129推送../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber。next@订阅服务器。js:93推送../node_modules/rxjs/_esm5/internal/Subject.js.Subject。next@主题。js:53推../node_modules/@angular/core/fesm5/core.js.EventEmitter。emit@core。html" target="_blank">js:3713（匿名）@core。js:4093推送../node_modules/zone.js/dist/zone.js.ZoneDelegate。调用@zone。js:388推送../node_modules/zone.js/dist/zone.js.zone。运行@zone。js:138推送../node_modules/@angular/core/fesm5/core.js.NgZone。runOutsideAngular@核心。js:4030 onHandleError@core。js:4093推送../node_modules/zone.js/dist/zone.js.ZoneDelegate。handleError@zone。js:392推送../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 invokeTask@zone。js:1540 [e-mail]:1566

我读了所有相关的帖子，但找不到解决方法，看起来这是一个非常简单的表单，这是一些教程的确切代码，我对表单没有深入的理解，但真的不明白为什么这不起作用。

Answer 1

< code>Root组件用于引导应用程序。这不应该在< code >声明数组中。

从声明数组中删除它:

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

Answer 2

这是因为选择器形式。将其更改为应用窗体。

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

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

Answer 3

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

尝试将选择器从“表单”更改为“自定义表单”，它肯定会工作。