Angular2 Reactive 表单使应用程序崩溃

Question

我们正在开发一个 Angular2 项目，它基于 mgechev 的 Angular2 Seed, trying to use reactive forms to bind the form to data, however Angular2 throws strange errors. The base idea, which we want to use, is the one documented here on scotch.io 作为标题 "Model Driven (Reactive) Forms" 下的 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 目前不包含任何输入字段，我们已经将它们注释掉以检查是否是它们导致应用程序失败，但显然似乎有一个我们无法弄清楚的更基本的小问题。其中一个输入字段看起来像这样，稍后应该读取到 form-tag:

 <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);
  }
}

我们得到的错误信息是

Unhandled Promise rejection: cannot set property 'stack' of undefined..."

错误，我无法从中找到有关我们代码的任何有用信息。我上传了完整错误堆栈的屏幕截图 here。

编辑：Kostadinov 关于更新 zone.js 的建议通过使 zone.js 返回更有用的错误响应来改善问题，我已将其上传 here。

此问题似乎与中记录的相同，但解决方案已在我的代码中实现：他们的问题是无法找到 [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

Angular2 Reactive 表单使应用程序崩溃

Angular2 Reactive forms crashes the app

forms

formbuilder

typescript

reactive

angular