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