I utilized the FormGroup feature to construct my form, and I required a textarea component. I decided to use the angular2-tinymce library/package to create the form. Here is my HTML template:
<form (submit)="submitCallLog($event)" [formGroup]="callLogForm">
<label for="title">Title</label>
<input type="text" id="title" formControlName="title">
<div [hidden]="callLogForm.controls.title.valid">
<p><i>Title is required</i></p>
</div>
<label for="content">Content</label>
<app-tinymce id="content" formControlName="content"></app-tinymce>
<button type="submit" class="right-align">Submit</button>
</form>
My Class:
export class NewCallLogComponent implements OnInit {
isNewCallLog = false;
callLogForm: FormGroup;
constructor(private fb: FormBuilder,
private route: ActivatedRoute,
private callLogService: CallLogService
) { }
ngOnInit() {
this.createForm();
this.callLogForm.valueChanges.subscribe(values => {
console.log('Changed: ', values);
})
}
createForm () {
this.callLogForm = this.fb.group({
title: ['', Validators.required],
content: ['', Validators.required]
});
}
resetFormValue() {
this.callLogForm.reset();
}
submitCallLog(e) {
console.log('Event: ', e);
e.preventDefault();
this.isNewCallLog = false;
const cusId = +this.route.snapshot.params['id'];
const newCallLog = new CallLog(
new Date().toLocaleString(),
this.callLogForm.value.title,
this.callLogForm.value.content,
'anonymous'
);
this.callLogForm.reset();
this.callLogService.addCallLog(cusId, newCallLog);
}
}
Upon submitting the form, everything performs correctly except for a handling error:
ERROR TypeError: Cannot read property 'length' of null
at o.setContent (http://localhost:4200/0.chunk.js:13388:23574)
at TinymceComponent.webpackJsonp.452.TinymceComponent.writeValue (http://localhost:4200/0.chunk.js:659:40)
at http://localhost:4200/vendor.bundle.js:21277:29
at http://localhost:4200/vendor.bundle.js:22463:65
at Array.forEach (native)
at FormControl.setValue (http://localhost:4200/vendor.bundle.js:22463:28)
at FormControl.reset (http://localhost:4200/vendor.bundle.js:22518:14)
at http://localhost:4200/vendor.bundle.js:22822:21
at http://localhost:4200/vendor.bundle.js:22861:66
at Array.forEach (native)
View_NewCallLogComponent_0 @ NewCallLogComponent.html:5
proxyClass @ compiler.es5.js:14091
DebugContext_.logError @ core.es5.js:12981
ErrorHandler.handleError @ core.es5.js:1144
(anonymous) @ core.es5.js:9373
(anonymous) @ platform-browser.es5.js:2683
ZoneDelegate.invokeTask @ zone.js:414
onInvokeTask @ core.es5.js:4117
ZoneDelegate.invokeTask @ zone.js:413
Zone.runTask @ zone.js:181
ZoneTask.invoke @ zone.js:476
NewCallLogComponent.html:5 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 12, nodeDef: Object, elDef: Object, elView: Object}
View_NewCallLogComponent_0 @ NewCallLogComponent.html:5
proxyClass @ compiler.es5.js:14091
DebugContext_.logError @ core.es5.js:12981
ErrorHandler.handleError @ core.es5.js:1149
(anonymous) @ core.es5.js:9373
(anonymous) @ platform-browser.es5.js:2683
ZoneDelegate.invokeTask @ zone.js:414
onInvokeTask @ core.es5.js:4117
ZoneDelegate.invokeTask @ zone.js:413
Zone.runTask @ zone.js:181
ZoneTask.invoke @ zone.js:476
This error prevents the form from being reset. Can anyone provide assistance?