在具有 contenteditable 的 div 中添加 formControlName

Question

我有一个带有 contenteditable="true" 的 div，因为我需要一个富文本组件，我尝试了很多库但没有任何效果，所以我的 div 可编辑但是当我尝试添加 formControlName 我得到了这个错误：

这是我的HTML

<div formControlName="main_description" class="full" id="textBox" contenteditable="true"></div>

这就是错误

ERROR Error: No value accessor for form control with name: 'main_description'
at _throwError (forms.js:1734:1)
at setUpControl (forms.js:1508:1)
at FormGroupDirective.addControl (forms.js:5255:1)
at FormControlName._setUpControl (forms.js:5837:1)
at FormControlName.ngOnChanges (forms.js:5782:1)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1520:1)
at callHook (core.js:2539:1)
at callHooks (core.js:2506:1)
at executeInitAndCheckHooks (core.js:2457:1)
at selectIndexInternal (core.js:8401:1)

Answer 1

是的，需要实现控件值访问器，它基本上是一个接口 angular 提供用于创建自定义表单控件。您收到的错误是因为指令 formControlName 期望您尝试绑定的元素是实现此接口的自定义元素。

基本查到这里的资源：ControlValueAccessor

此外，这应该对您有所帮助：Implementing ControlValueAccessor

Answer 2

我得到了解决方案！我必须添加一个不可见的输入来分配 div 数据

这里是：https://github.com/Avalojandro/Angular-RichText-PureJS

在具有 contenteditable 的 div 中添加 formControlName

Add formControlName in a div with contenteditable

richtextbox

form-control

angular

angular-forms