Angular2 Reactive表单使应用程序崩溃

Question

我们正在基于mgechev的Angular2 Seed开发Angular2 Projekt，试图使用反应式表单将表单绑定到数据，但Angular2抛出了奇怪的错误。我们想要使用的基本思想是scotch.io上以ComplexForm的形式记录的，标题是"模型驱动(反应式)表单"。我们关于表格的代码如下：

app.module.ts

@NgModule({
imports: [BrowserModule, HttpModule, AppRoutingModule, AboutModule, HomeModule, ExaminerThesisListModule,
ExaminerOverviewModule, ExaminerCreateThesisModule, StudentOverviewModule, SharedModule.forRoot(), FormsModule,
ReactiveFormsModule, CommonModule],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }

组件html

<form [formGroup]="formData">
<div class="well">aa</div>
</form>

注意：删除[formGroup]="formData"属性后，应用程序不会失败。是的，html目前不包含输入字段，我们已经对它们进行了注释，以检查是否是它们导致了应用程序的失败，但显然还有一个更基本的琐碎问题我们无法解决。其中一个输入字段看起来像这样，稍后应该读取到表单标签：

<div class="form-group necessary">
<label class="input-heading">Intern oder Extern?</label>
<div class="radio">
<label>
<input type="radio" name="externalInternal" value="internal" [formControl]="formData.controls['externalInternal']"> Interne Abschlussarbeit
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="externalInternal" value="external-faculty" [formControl]="formData.controls['externalInternal']"> Abschlussarbeit an externer Fakultät
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="externalInternal" value="external-company" [formControl]="formData.controls['externalInternal']"> Abschlussarbeit an externer Firma
</label>
</div>
</div>

实际的组件类型脚本代码如下所示：

import {Component, OnInit} from '@angular/core';
import { ThesesService } from '../shared/theses/theses.service';
import { Thesis } from '../shared/theses/thesis.model';
import {FormBuilder, FormGroup} from "@angular/forms";
/**
* This class represents the lazy loaded ExaminerOverviewComponent.
*/
@Component({
moduleId: module.id,
selector: 'examiner-create-thesis',
templateUrl: 'examiner-create-thesis.component.html',
styleUrls: ['examiner-create-thesis.component.css']
})
export class ExaminerCreateThesisComponent implements OnInit {
formData: FormGroup;
ngOnInit() {
this.formData = this.fb.group({
"thesisType": "bachelor",
"externalInternal": "internal",
"titleGerman": "testg",
"titleEnglish": "teste"
});
}
constructor(private thesesService:ThesesService, private fb: FormBuilder) { };
submit(formVal: any) {
console.log("SUBMIT", formVal);
}
}

我们得到的错误信息是

未处理的Promise拒绝：无法设置未定义的属性"stack"。。。">

错误，从中我找不到任何有关我们代码的有用信息。我在这里上传了一张完整错误堆栈的截图。

编辑：Kostadinov更新zone.js的建议改进了这个问题，使zone.jss返回了一个更有用的错误响应，我已经上传到这里了。

这个问题似乎与这个问题中记录的问题相同，但解决方案已经在我的代码中实现：他们的问题是找不到[formGroup]指令，因为它是由ReactiveFormsModule实现的，但这个模块已经在AppModule中正确导入，所以这不应该造成问题。

Answer 1

显然这是Zone.js中的一个错误：https://github.com/angular/angular-cli/issues/3975.只需更新到最新版本：

npm install --save zone.js@latest

或明确地：

npm install --save zone.js@0.7.4