Angular 7 带有 innerHTML 的响应式表单

Question

我在 Angular 7 应用程序中使用 Primeng 编辑器。

<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>

我正在使用 patchValue 设置控件的值，例如：

const desc = '<strong>Hello World</strong>';

this.form.patchValue({
  description: desc
});

另一个用例：

const desc = '<ul><li>Test 1</li><li>Test 2</li><li>Test 3</li></ul>'

在上述情况下，p-editor 应将其呈现为：

测试 1
测试 2
测试 3

但我的反应形式是删除所有 HTML 格式并仅将 "Hello World" 分配给控件。我需要保留来自服务器的 HTML 格式。

如有任何帮助，我们将不胜感激。

Answer 1

找不到合适的解决方案，但您可以试试这个技巧：

<p-editor #myEditor formControlName="description" [style]="{'height':'320px'}"></p-editor>

并在 ts 文件中

import { Editor } from 'primeng/primeng';

@ViewChild('myEditor') myEditor: Editor


const desc = '<strong>Hello World</strong>';

this.form.patchValue({
  description: desc
});

// this will replace innerHTML with service data
this.myEditor.e1.nativeElement.querySelector('ql-editor').innerHTML = desc;

Angular 7 带有 innerHTML 的响应式表单

Angular 7 Reactive form with innerHTML

primeng

angular

angular-reactive-forms