使用使用angular2-tinymce庫的FormGroup的重置方法時出錯

我已經使用FormGroup來構建我的表單。我需要一個不錯的textarea組件，然後我選擇angular2-tinymce庫/包來構建表單。這裏是我的HTML模板：使用使用angular2-tinymce庫的FormGroup的重置方法時出錯

<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>

我的班級：

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

    } 
}

提交表單後，一切，除了醒目的錯誤OK：

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

故障原因的形式不能復位。有人幫忙嗎？

來源

2017-05-25 TheRemjx

很晚的回覆，但也許別人也有這個。我在使用tinyMCE的自定義組件包裝時遇到類似的問題。在我的情況下問題是，當你觸發窗體重置ControlValueAccessor writeValue方法被稱爲null作爲參數。我已經通過使用一個簡單的條件來糾正他們的問題，以避免將tinyMCE編輯器內容設置爲null。

希望這會有所幫助！

來源

2017-06-19 14:24:11

使用使用angular2-tinymce庫的FormGroup的重置方法時出錯

回答

相關問題