0

我正在尝试使用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 值，尽管它非常通用。

4

2 回答 2

0

这可能是因为您传递的是类型字符串而不是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);
于 2018-11-10T21:04:00.160 回答
0

将 Html 字符串添加到 textArea 将始终在 textarea 中显示为纯 Html。

[innerHTML]只能应用于 span/div 或段落元素。如果在输入字段中使用，您不能期望 html 标记显示为或（正如它在 HTML 页面标记中显示的那样）。它总是看起来很原始。

话虽如此，您始终可以将 HTML 字符串修补到您的文本区域，但不要期望它显示为带有所有样式等的 HTML 标记。

例如，您可以在此处查看此 stackBlitz

于 2018-11-02T18:29:37.633 回答