这是我的 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 Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._updateValue (forms.js:3764) at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2600) at new FormGroup (forms.js:3348) at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6009) at new FormComponent (form.component.ts:12) at createClass (core.js:10156) at createDirectiveInstance (core.js:10041) at createViewNodes (core.js:11263) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.FormGroup._updateValue (forms.js:3764) at FormGroup.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2600) at new FormGroup (forms.js:3348) at FormBuilder.push../node_modules/@angular/forms/fesm5/forms.js.FormBuilder.group (forms.js:6009) at new FormComponent (form.component.ts:12) at createClass (core.js:10156) at createDirectiveInstance (core.js:10041) at createViewNodes (core.js:11263) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540)

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

ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded RangeError: Maximum call stack size exceeded at createViewNodes (core.js:11228) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at createViewNodes (core.js:11228) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at callViewAction (core.js:11579) at execComponentViewsAction (core.js:11498) at createViewNodes (core.js:11291) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4062) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1540) defaultErrorLogger @ core.js:1601 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1650 next @ 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 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3713 (anonymous) @ core.js:4093 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4030 onHandleError @ core.js:4093 push../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 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566

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