如何解决通过JavaScript添加HTML时Angular FormBuilder不应用元素值
我正在尝试半动态地在angular上构建形式。我有此功能,该功能在component.ts中创建表单并添加表单HTML。现在的问题是,当我使用它时,它不会将值应用于表单元素。另一方面,如果HTML是经过硬编码的,并且FormGroup
是在ngOnInit();
上创建的,则它确实起作用
private createForm(): void {
this.displayForm2 = new FormGroup({
profileName: new FormControl('test')
});
document.getElementById('form-div').innerHTML =
`<form [formGroup]="displayForm2">
<label for="profileName">Name: </label>
<input type="text" formControlName="profileName"><br>
</form>`;
}
我认为问题是因为HTML是通过函数添加的,而不是通过硬编码添加的,但是我不确定100%并且不知道如何解决它,有什么想法吗?
解决方法
您可以使用管道:
@Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(value: any,...args: any[]): any {
return this.sanitizer.bypassSecurityTrustHtml(value);
}
}
在html中,您可以执行以下操作:
<div [innerHTML]="myHtmlString | safeHtml"></div>
请参见https://angular.io/api/platform-browser/SafeHtml
,我设法通过以下方法解决了这个问题:
- 硬编码html文件中的表单。
- 在
FormGroup
中用FormControls
创建ngOnInit()
。 - 提供了使用
FormGroup
编辑patchValue()
的值的功能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。