Angular 反应形式设置值与 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 页面标记中显示的那样）。它总是显得原始。

Having said that, You can always patch a HTML string to your textarea but do not expect it to display as HTML mark up with all the styles etc.

你可以查看这个stackBlitz here for example

Answer 2

可能是因为你传递的是一个类型string and not a 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);

Angular 反应形式设置值与 HTML 字符串

Angular reactive form setting value with HTML string

javascript

typescript

angular

angular-reactive-forms