Question

我使用FormGroup来构建我的表单。我需要一个很好的textarea组件然后我选择angular2-tinymce库/包来构建表单。这是我的html模板：

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

  }
}

提交表单后，除了捕获错误外，一切正常：

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

错误导致表单无法重置。有人帮忙吗？

Answer 1

相当迟到的回复，但也许其他人也得到了这个。我在使用tinyMCE的自定义组件包装器时遇到了类似的问题。我的问题是当你触发表单重置时，调用ControlValueAccessor writeValue方法，并将null作为参数。我通过使用一个简单的条件来纠正它们的问题，以避免将tinyMCE编辑器内容设置为null。

希望这有帮助！

使用angular2-tinymce库时使用FormGroup的reset方法时出错

1 个答案: