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

Question

I am trying to set a string value to the control with patchValue method. The string value contains HTML tags but the HTML tags are translated as plain text for some reason.

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

The Angular API doc didn't say too much about how patchValue can handle the HTML value and is pretty generic though.

Answer 1

Adding Html String to a textArea will always show up as plain Html in the textarea.

The [innerHTML] can only be applied to span/div or paragraph elements. You can not expect a html tag to show up as or (as it appears in HTML page mark up), if used inside a input field. it will always appear raw.

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.

You can check this stackBlitz here for example

Answer 2

It's probably because you are passing a type string and not a DOM element .

Example:

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

Libraries like jQuery allow easier creation of DOM elements.
For example:

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