Angular 7 Реактивная форма с innerHTML

Question

Я использую редактор Primeng в своем приложении Angular 7.

<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-редактор должен отобразить его как:

• Тест 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;