Angular响应式表单结合bypassSecurityTrustHtml：表单控件值无法赋值

问题根源 #

通过innerHTML插入的表单元素只是原生DOM节点，并没有和Angular响应式表单的FormControl建立绑定关系，Angular表单系统无法追踪这些控件的取值，因此this.form.value里拿不到对应值。

解决方案 #

1. 手动关联原生控件与FormControl（适配必须用innerHTML的场景）

在innerHTML渲染完成后，手动获取原生DOM控件，监听其输入事件，同步值到对应FormControl中。

示例代码：

import { Component, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <div #formContainer [innerHTML]="htmlContent | safeHtml"></div>
    </form>
    <button (click)="getValue()">获取表单值</button>
  `,
})
export class AppComponent implements AfterViewChecked {
  form = new FormGroup({
    username: new FormControl(''),
    email: new FormControl(''),
  });
  htmlContent = `
    <input type="text" name="username" placeholder="用户名">
    <input type="email" name="email" placeholder="邮箱">
  `;
  @ViewChild('formContainer') formContainer!: ElementRef;
  private isSynced = false;

  ngAfterViewChecked() {
    if (!this.isSynced && this.formContainer.nativeElement.children.length > 0) {
      this.syncNativeControls();
      this.isSynced = true;
    }
  }

  syncNativeControls() {
    const inputs = this.formContainer.nativeElement.querySelectorAll('input');
    inputs.forEach((input: HTMLInputElement) => {
      // 初始化同步原生控件值到FormControl
      this.form.get(input.name)?.setValue(input.value);
      // 监听输入事件实时同步值
      input.addEventListener('input', () => {
        this.form.get(input.name)?.setValue(input.value);
      });
    });
  }

  getValue() {
    console.log(this.form.value);
  }
}

2. 替代innerHTML的标准方案（更推荐）

如果业务允许，尽量避免使用innerHTML，改用Angular的动态渲染方式（比如*ngFor），让控件天然和响应式表单绑定。

示例代码：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <div *ngFor="let control of controls">
        <input [type]="control.type" [formControlName]="control.name" [placeholder]="control.placeholder">
      </div>
    </form>
    <button (click)="getValue()">获取表单值</button>
  `,
})
export class AppComponent {
  form = new FormGroup({
    username: new FormControl(''),
    email: new FormControl(''),
  });
  controls = [
    { name: 'username', type: 'text', placeholder: '用户名' },
    { name: 'email', type: 'email', placeholder: '邮箱' },
  ];

  getValue() {
    console.log(this.form.value);
  }
}

关键说明 #

• 第一种方案需注意在DOM渲染完成后执行同步逻辑，用AfterViewChecked钩子配合标记位可避免重复执行。
• 第二种方案是Angular的标准实践，能保证表单控件与FormControl的双向绑定，维护性和可靠性更高。

内容的提问来源于stack exchange，提问作者Ajay Ganesh04