I encountered an issue while trying to set up an angular2 reactive form, as I am getting a runtime error when the component loads.
Uncaught TypeError: Cannot set property stack of [object Object] which has only a getterThe error message is not very clear, making it difficult for me to understand what exactly is causing the problem. I have been following a tutorial on an angular university article, but so far I haven't found any solutions. I thought there might be some breaking changes in Angular 2, so I checked the changelog but didn't find anything related to my specific issue with reactive forms.
Any assistance or guidance on how to resolve this error would be greatly appreciated. I will continue investigating to find a solution.
addevent.component.ts
@Component({
selector: 'addevent',
templateUrl: 'addevent.component.html',
styleUrls: ['addevent.scss']
})
export class AddEvent {
// vars
private _addEventForm:FormGroup;
private _eventTitle:FormControl;
private _eventDescription:FormControl;
constructor(private _addEventService:AddEventService,
private _formBuilder:FormBuilder) {
// init vars
this._eventTitle = new FormControl('', Validators.required);
this._eventDescription = new FormControl('', Validators.required);
this._addEventForm = _formBuilder.group({
'eventTitle': this._eventTitle,
'eventDescription': this._eventDescription
});
}
private addEvent():void {
console.log(this._addEventForm);
//this._addEventService.addEvent();
}
}
addevent.component.html
<div class="h3 content-title">Add Event</div>
<form [formGroup]="_addEventForm" (ngSubmit)="addEvent()">
<p>
<label>Title</label>
<input type="text" formControlName="eventTitle">
</p>
<p>
<label>Description</label>
<input type="text" formControlName="eventDescription">
</p>
<p>
<button type="submit" [disabled]="_addEventForm.invalid">Submit</button>
</p>
</form>
dashboard.module.ts
@NgModule({
declarations: [Dashboard, Navbar, Sidebar, Home, Profile, Events, AddEvent],
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule],
providers: [ContentSwap, SidebarActivity, AuthService, FirebaseAuthService]
})
export class DashboardModule {}