Angular4打印功能问题：响应式表单值打印不显示

这个问题的核心在于Angular响应式表单的模型驱动特性：用户输入的值存储在FormGroup/FormControl实例中，并不会实时同步到DOM里input元素的value属性上。当你直接获取print-section的innerHTML时，拿到的只是表单初始的DOM状态，自然看不到用户输入的内容。

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

方案一：打印前手动同步表单值到DOM #

我们可以写一个辅助函数，遍历所有表单控件，把FormControl的值手动赋值给对应的input元素的value属性，再去获取innerHTML打印。

步骤1：添加同步函数到组件类 #

syncFormValuesToDom(): void {
  // 遍历表单的所有控件名
  Object.keys(this.myForm.controls).forEach(key => {
    const control = this.myForm.get(key);
    // 找到对应formControlName的input元素
    const inputElement = document.querySelector(`[formControlName="${key}"]`) as HTMLInputElement;
    if (inputElement && control) {
      // 把控件值同步到input的value属性
      inputElement.value = control.value || '';
    }
  });
}

步骤2：修改打印函数，先同步再打印 #

print(): void {
  // 先同步表单值到DOM
  this.syncFormValuesToDom();
  
  let printContents, popupWin;
  printContents = document.getElementById('print-section').innerHTML;
  popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
  popupWin.document.open();
  popupWin.document.write(`
    <html>
      <head>
        <title>Print tab</title>
        <style>
          /* 这里可以添加打印专属样式，比如调整间距、隐藏不必要元素 */
        </style>
      </head>
      <body onload="window.print();window.close()">${printContents}</body>
    </html>`
  );
  popupWin.document.close();
}

方案二：直接渲染表单值（更简洁） #

既然我们已经能通过this.myForm.value拿到所有表单值，不如直接构建静态的HTML内容来打印，避免操作DOM的麻烦，还能灵活控制打印样式。

修改你的打印函数如下：

print(): void {
  const formValues = this.myForm.value;
  // 用静态HTML渲染表单值，样式可以和原表单保持一致
  const printContents = `
    <div class="form-child input-wrap">
      <span>Date</span>
      <div class="borderStyle form-control">${formValues.date || ''}</div>
    </div>
    <div class="form-child input-wrap">
      <span>Address</span>
      <div class="borderStyle form-control">${formValues.address || ''}</div>
    </div>
  `;

  let popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
  popupWin.document.open();
  popupWin.document.write(`
    <html>
      <head>
        <title>Print tab</title>
        <style>
          /* 复制原表单的CSS样式，确保打印效果一致 */
          .form-child { margin: 1rem 0; }
          .borderStyle { border: 1px solid #ced4da; padding: .375rem .75rem; border-radius: .25rem; }
          .input-wrap span { display: inline-block; margin-bottom: .5rem; }
        </style>
      </head>
      <body onload="window.print();window.close()">${printContents}</body>
    </html>`
  );
  popupWin.document.close();
}

两种方案都能解决问题，方案二更适合不需要保留表单交互性（毕竟打印是静态内容）的场景，代码也更简洁；方案一则适合需要完全复用原表单DOM结构和样式的情况。

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