如何获取包含选中值的Angular表单HTML内容？

这个问题的核心原因是：Angular响应式表单的控件状态（比如选中值）是维护在FormControl模型中的，并不会主动修改DOM里<option>元素的selected属性——所以直接通过innerHTML获取的内容里，自然看不到选中标记。

下面给你两种实用的解决方案：

方案一：临时修改DOM添加选中属性后再获取HTML #

这种方式直接操作当前表单的DOM，临时给选中的<option>加上selected属性，拿到HTML后再恢复原状态，不会影响页面交互：

修改你的Print()方法如下：

Print(): void {
  // 1. 获取表单里的select元素和当前选中值
  const selectEl = this.myForm.nativeElement.querySelector('select') as HTMLSelectElement;
  const selectedValue = this.myFormGrp.get('productName')?.value;

  if (!selectedValue) {
    console.log(this.myForm.nativeElement.innerHTML);
    return;
  }

  // 2. 先清除所有option的selected属性（避免残留）
  Array.from(selectEl.options).forEach(opt => opt.removeAttribute('selected'));
  // 3. 给匹配选中值的option添加selected属性
  const targetOption = Array.from(selectEl.options).find(opt => opt.value === selectedValue);
  if (targetOption) {
    targetOption.setAttribute('selected', 'selected');
  }

  // 4. 现在获取的innerHTML就包含选中状态了
  const formHtml = this.myForm.nativeElement.innerHTML;
  console.log(formHtml);

  // 5. 恢复原DOM状态（可选，避免影响后续表单操作）
  if (targetOption) {
    targetOption.removeAttribute('selected');
  }
}

方案二：创建临时DOM元素处理（不修改原页面DOM） #

如果不想触碰原页面的DOM，可以复制表单内容到一个临时的DOM元素中，在临时元素里处理选中状态，更安全：

Print(): void {
  const selectedValue = this.myFormGrp.get('productName')?.value;
  // 创建临时div复制原表单内容
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = this.myForm.nativeElement.innerHTML;

  // 在临时div里找到select和对应的option，添加selected属性
  const tempSelect = tempDiv.querySelector('select') as HTMLSelectElement;
  if (selectedValue) {
    const targetOption = Array.from(tempSelect.options).find(opt => opt.value === selectedValue);
    if (targetOption) {
      targetOption.setAttribute('selected', 'selected');
    }
  }

  // 获取处理后的HTML
  const formHtml = tempDiv.innerHTML;
  console.log(formHtml);
}

额外提示：修复模板里的表单绑定错误 #

你的模板里有个小问题：<div #myForm [formGroup]="myForm">这里的[formGroup]应该绑定组件里的myFormGrp，而不是模板引用变量myForm，否则表单绑定会失效，修改为：

<div #myForm [formGroup]="myFormGrp"> 
 <!-- 其余内容不变 -->
</div>

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