We are working on a Angular2 Projekt, based off mgechev's 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 as ComplexForm under the headline "Model Driven (Reactive) Forms". Our code regarding the form is the following:
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 { }
component html
<form [formGroup]="formData">
<div class="well">aa</div>
</form>
Note: The app doesn't fail to run, when the [formGroup]="formData" attribute is removed. And yes, the html currently contains no input fields, we've commented them out to check if it was them making the app fail, but apparently there seems to be a more basic trivial problem we can't figure out. One of the input fields looks like this and should later be read to the 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>
The actual component typescript code looks like this:
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);
}
}
The error message we get is a
Unhandled Promise rejection: cannot set property 'stack' of undefined..."
error, from which I can't find any helpful information about our code. I've uploaded a screenshot of the full error stack here.
EDIT: Kostadinov's suggestion of updating zone.js improved the problem by making zone.js returning a more helpful error response, which I've uploaded here.
This problem seems to be the same as documented in this problem, but the solution is already implemented in my code: Their problem was that the [formGroup] directive could not be found as it is implemented by ReactiveFormsModule, but this Module is already imported in AppModule properly, so this should not be causing a problem.
