在Angular中,可以使用FormControl.setValue()
方法来设置响应式表单的值。如果要使用HTML字符串来设置值,可以使用DomSanitizer
来解析HTML字符串,并将其作为值传递给FormControl.setValue()
方法。
首先,导入DomSanitizer
和FormControl
:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
然后,在组件类中创建一个FormControl
:
export class MyComponent {
htmlValue: string;
formControl: FormControl;
constructor(private sanitizer: DomSanitizer) {
this.formControl = new FormControl();
}
setFormValue() {
const sanitizedHtmlValue = this.sanitizer.bypassSecurityTrustHtml(this.htmlValue);
this.formControl.setValue(sanitizedHtmlValue);
}
}
在上面的示例中,我们创建了一个名为htmlValue
的变量来存储HTML字符串。然后,我们在构造函数中创建了一个名为formControl
的响应式表单控件。
接下来,我们创建了一个名为setFormValue()
的方法来设置表单的值。在该方法中,我们使用DomSanitizer
的bypassSecurityTrustHtml()
方法来解析HTML字符串并将其赋值给sanitizedHtmlValue
变量。然后,我们使用formControl.setValue()
方法将解析后的HTML字符串设置为表单的值。
最后,在模板中使用[(ngModel)]
将输入框与htmlValue
进行绑定,并在按钮的click
事件中调用setFormValue()
方法:
这样,在输入框中输入HTML字符串,并点击按钮时,将会将HTML字符串设置为响应式表单的值。