1

我们正在开发基于 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);
  }
}

我们得到的错误信息是

未处理的承诺拒绝：无法设置未定义的属性“堆栈”......”

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

编辑： Kostadinov 的更新 zone.js 的建议通过使 zone.js 返回更有用的错误响应来改善问题，我已经上传了这里。

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

4

1 回答 1

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
于 2017-01-25T19:38:22.270 回答