Question

我在Angular4中使用反应形式。我想为它实现打印功能。但是，打印时不显示反应形式值。我怎样才能做到这一点？在下面发布我的代码：

HTML

<section id="print-section">
    <form [formGroup]="myForm" novalidate>
        <div class="form-child input-wrap">
            <span>Date</span>
            <input type="text" placeholder="Date" class="borderStyle form-control" formControlName="date">
        </div>
        <div class="form-child input-wrap">
            <span>Address</span>
            <input type="text" placeholder="Address" class="borderStyle form-control" formControlName="address">
        </div>
    </form>
</section>

TS

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();

Answer 1

这一行

let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;

根据编码不正确，这就是我的下面的答案不起作用的原因。如果您使用的是反应形式方法，那么您应该在ts文件中创建，如下所示

export class HeroDetailComponent3 {
  printContents: FormGroup; 

  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
    this.createForm();
  }

  createForm() {
    this.printContents= this.fb.group({
      date: '', 
      address: ''
    });
  }
}

点击此处查看详细信息：https://angular.io/guide/reactive-forms

如果您想要表单值，请执行此操作

 const json = JSON.stringify( this.printContents.value );
 <body onload="window.print();window.close()">${json }</body>

或尝试

我不确定，但您可能需要使用DomSanitizer，因为您尝试将角色放置为html元素。

Angular4中的打印功能 - 未显示反应形式值

1 个答案: