Angular 当通过 javascript 添加 HTML 时，FormBuilder 不应用元素值

Question

我正在尝试在 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% 确定也不知道如何解决它，有什么想法吗？

Answer 1

您可以使用管道 :

@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

Answer 2

我通过以下方式成功解决了这个问题：

在 html 文件中对表单进行硬编码。
正在 ngOnInit() 中创建 FormGroup 及其 FormControls。
使用 patchValue() 创建了一个函数来编辑 FormGroup 的值。

Angular 当通过 javascript 添加 HTML 时，FormBuilder 不应用元素值

Angular FormBuilder not applying element values when HTML added through javascript

html

angular

angular-forms

angular-formbuilder