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 here for example

Answer 2

可能是因为您传递的是类型string而不是DOM element。

示例：

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);

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

2 个答案: