通过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

,

我设法通过以下方法解决了这个问题：

1. 硬编码html文件中的表单。
2. 在FormGroup中用FormControls创建ngOnInit()。
3. 提供了使用FormGroup编辑patchValue()的值的功能。