Реактивные формы машинописный CKEDITOR CustomValueModule - PullRequest
Новая
       35

Реактивные формы машинописный CKEDITOR CustomValueModule

7 голосов
/ 08 мая 2020

Я пытаюсь преобразовать этот CustomValueModule в элемент управления CKEDITOR, но получаю сообщение об ошибке, что этот тег не поддерживается. Шаблон компонента является тегом div, поэтому я не уверен, почему я получаю эту ошибку.

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

Ошибка 

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

просмотреть 

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

Компонент 

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

Компонент

ngAfterViewInit () {

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

обновлено 

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

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

Ошибка при удалении формы publi c: FormGroup и просто 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()
    });

1 Ответ

2 голосов
/ 15 мая 2020

Если то, чего вы здесь пытаетесь достичь, - это создать редактор, в котором вы можете привязать его значение к реактивным формам, я сделал именно это.

Я обнаружил некоторые проблемы с вашим кодом. Итак, чтобы помочь, я переписал код с комментариями, чтобы вы могли извлечь из этого пользу.

Полный рабочий код: https://stackblitz.com/edit/angular-ivy-wv9vdi

...