我正在尝试将此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]
});
删除公用表单: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()
});
答案 0 :(得分:2)
如果您要在此处实现的目的是创建编辑器,您可以将其值绑定到反应形式,那么我就是这样做的。
我发现您的代码存在一些问题。因此,为了提供帮助,我用注释重新编写了代码,以便您可以从中受益。