Question

我在Angular 4应用程序中有一个反应式表单设置，它包含常规表单控件和一些实现TinyMCE编辑器的自定义控件。

所有设置和工作都可以将HTML文本区域的更改写回到响应式表单控件（这也允许正确应用验证规则）。但是我现在需要监听焦点事件以更新过滤器。

这适用于“常规”表单控件，但TinyMCE自定义控件证明有点问题。这是我对TinyMCE自定义控件的代码：

ngAfterViewInit() {
  tinymce.init({
    selector: '#' + this.elementId,
    plugins: ['lists', 'charactercount'],
    skin_url: '/assets/skins/lightgray',
    menubar: false,
    branding: false,
    height: 150,
    setup: (editor) => {
      this.editor = editor;
      editor.on('keyup click', () => {
        const content = editor.getContent();
        this.propagateChange(content);
      });
      editor.on('focusin', (ev) => {
        console.log(ev);
      });
    },
  });
}

propagateChange = (_: any): void => { }

registerOnChange(fn: any): void {
  this.propagateChange = fn;
}

registerOnTouched(fn: any): void {
  this.propagateChange = fn;
}

正如您所看到的那样，事件对象被记录到控制台（当我专注于其中一个TinyMCE表单控件时，它会显示出来）。问题是，在使用@HostListener

的Angular父组件中似乎没有识别出这一点

@HostListener('focusin', ['$event']) updateFilter(event: any) {
  this.commentFilterField.value = event.srcElement.id;
}

我尝试添加this.propagateChange(ev);并类似于focusin事件，尝试手动强制触发TinyMCE focus()事件，并尝试使用{更新反应式表单状态{1}}倾听者，但没有快乐。

将焦点事件从自定义表单控件传播到Angular反应形式

0 个答案: