Print functionality in Angular4 - reactive form values are not shown

Question

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

why are you not using myForm to print elements value? Add more code specific to your ts — Nitishkumar Singh
– Nitishkumar Singh, Commented May 28, 2018 at 6:57

Pranay Rana · Accepted Answer · 2018-05-28 09:32:13Z

0

this line

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

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: ''
    });
  }
}

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>

or try out

I am not sure but you might need to use DomSanitizer, as you are trying to put html elements from angular.

edited May 28, 2018 at 9:32

answered May 28, 2018 at 7:01

Pranay Rana

177k37 gold badges244 silver badges267 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RemyaJ Over a year ago

I got undefined when I did this.

RemyaJ Over a year ago

still the same.

Pranay Rana Over a year ago

@RemyaJ have you used snitizer and can you share your full ts file code

RemyaJ Over a year ago

No I already have a form and formcontrol names and all of that. The values are not shown in the print preview

Collectives™ on Stack Overflow

Print functionality in Angular4 - reactive form values are not shown

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related