Reactive Forms typescript CKEDITOR CustomValueModule

Question

I am trying to convert this CustomValueModule into a CKEDITOR control but I am getting a error that the tag is not support. The Component template is a div tag so I am not sure why I am getting this error.

https://stackblitz.com/edit/angular-ivy-5kvfys

Error

EXCEPTION: The specified element mode is not supported on element: "editor".

view

<Editor 
        [formControl]="controlGroup.controls.value" >
</Editor>

Component

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    selector: 'Editor',
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => Editor),
            multi: true
        }
    ],
    template: `<div [attr.id]="editorId" contenteditable="true"
                style="width: 100% !important; overflow: hidden"
                class="form-control sentence-part-values-inline sentence-part-values-inline-textbox-number">
                </div>`,
})
export class Editor implements ControlValueAccessor {
    constructor() { }

    onChange: any = () => { }
    onTouch: any = () => { }
    val = ""

    set value(val) {
        if (val !== undefined && this.val !== val) {
            this.val = val
            this.onChange(val)
            this.onTouch(val)
        }

    }

    writeValue(value: any) {
        this.value = value
    }

    registerOnChange(fn: any) {
        this.onChange = fn
    }

    registerOnTouched(fn: any) {
        this.onTouch = fn
    }
}

Component

ngAfterViewInit() {

this.ngZone.runOutsideAngular(() => {
    (<any>window).CKEDITOR.config.autoParagraph = false;
    if (!(<any>window).CKEDITOR.instances[this.editorId]) {

updated

initControlGroup(fb: FormBuilder) : FormGroup {
    return fb.group({
        "value": [""]            
    });
}

public form: FormGroup = this.formBuilder.group({
    editorValue: ["",Validators.required]
});

Error when I remove the public form: FormGroup and just have the initControlGroup

EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

Answer 1

If what you trying to achieve here is creating editor that you could bind it's value to reactive-forms I did that exactly.

I found some issues with your code. So, in order to help, I re-wrote the code with comments so you could benefit from it.

Full working code: https://stackblitz.com/edit/angular-ivy-wv9vdi