带HTML字符串的角反应形式设置值

Question

我正在尝试使用patchValue方法将字符串值设置为控件。 字符串值包含HTML标记，但是出于某些原因，HTML标记被转换为纯文本。

<textarea rows="5" name="myField" formControlName="myField" readonly></textarea>

const htmlStr = '<p>HTML Content HERE</p>'
// assuming the form group instance already created
this.form.get('myField').patchValue(this.htmlStr);

Angular API文档并没有过多地提及patchValue如何处理HTML值，尽管它非常通用。

Answer 1

向文本区域添加HTML字符串将始终在文本区域中显示为纯HTML。

[innerHTML]仅可应用于span / div或段落元素。 如果在输入字段中使用html标记，则不能期望html标记显示为或（显示在HTML页面标记中）。 它将始终显示为原始。

话虽这么说，您始终可以将HTML字符串打补丁到您的文本区域，但不要期望它以HTML标记的所有样式显示。

您可以在此处检查此stackBlitz

Answer 2

可能是因为您传递的是类型字符串，而不是DOM元素 。

例：

var domElementP         = document.createElement("p");
domElementP.textContent = 'TEXT HERE';
this.form.get('myField').patchValue(this.domElementP);

jQuery库允许更轻松地创建DOM元素。
例如：

// we assume that jQuery was loaded
var stringDOM = '<p>' +
  '<span>HTML Content HERE <i class="icon"></i></span>' +
'</p>';
var $jQueryObject            = $.parseHTML(stringDOM);
var domElement               = $jQueryObject[0];
this.form.get('myField').patchValue(this.domElement);