Angular4中的打印功能-未显示反应形式的值 [英] Print functionality in Angular4 - reactive form values are not shown
问题描述
我在Angular4中使用反应形式.我想实现相同的打印功能.但是，在打印时未显示反应形式值.我怎样才能做到这一点?在下面发布我的代码:
I am using a reactive form in Angular4. I want to implement print functionality for the same. However, the reactive form values are not shown while printing. How can I achieve this? Posting my code below:
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();
推荐答案
此行
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
按照编码是不正确的，这就是我下面的答案不起作用的原因.如果您使用反应式表单方法，则应从ts文件中创建，如下所示
is incorrect as per coding , that is reason my below answer is not working. if you are using reactive form approach then you should create from in your ts file like as below
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
check here for detail : https://angular.io/guide/reactive-forms
如果您想要表单值，请执行以下操作
if you want form value the do like this
const json = JSON.stringify( this.printContents.value );
<body onload="window.print();window.close()">${json }</body>
或尝试
我不确定，但是您可能需要使用 DomSanitizer 试图把html元素从角度.
I am not sure but you might need to use DomSanitizer, as you are trying to put html elements from angular.
这篇关于Angular4中的打印功能-未显示反应形式的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
