Angular 5表单组件触发RangeError栈溢出错误求助

嘿，我一眼就发现了导致你这个栈溢出错误的核心问题，咱们一步步来修复：

1. 组件Selector与原生HTML标签冲突（最关键原因） #

你把组件的selector设成了form，这和HTML原生的<form>标签完全同名！当Angular渲染你的FormComponent时，看到模板里的<form [formGroup]="formy">，会把这个标签当成你的自定义FormComponent，而不是原生表单元素。这就导致了无限递归渲染：FormComponent里的<form>会再次触发创建新的FormComponent，循环往复直到调用栈被撑爆，这就是你看到Maximum call stack size exceeded的根本原因。

修复方法： #

修改form.ts里的组件selector，改成一个不会和原生标签冲突的名称，比如app-form：

@Component({
 selector: 'app-form', // 替换为自定义名称
 templateUrl: './form.component.html',
 styleUrls: ['./form.component.scss']
})

之后在调用这个组件的地方，要使用<app-form></app-form>，而不是<form>。

2. 模板中FormArray的引用错误 #

你的模板里用了*ngFor='let topic of topics.controls'，但组件类里并没有定义topics属性——topics是你在formy这个FormGroup里的FormArray，直接引用会导致错误（虽然这不是栈溢出的直接原因，但也是需要修复的问题）。

修复方法： #

在组件类里添加一个getter来获取这个FormArray：

import { FormArray } from '@angular/forms'; // 别忘了导入FormArray

// ... 其他代码 ...
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([])
 })
 }

 // 添加这个getter，方便模板引用
 get topics(): FormArray {
   return this.formy.get('topics') as FormArray;
 }
}

这样模板里的*ngFor='let topic of topics.controls'就能正常工作了。

修改后验证 #

做完这两个修改后，你应该不会再遇到栈溢出错误了。另外，novalidate指令其实和这个栈溢出问题无关，它只是关闭原生表单验证，你可以根据需求决定是否保留。

内容的提问来源于stack exchange，提问作者Michael