I have the following html code which consists of a form, containing different types of fields:

        <div  id="print">
          <form [formGroup]="form">
                  <div  *ngFor="let field of category.fields">
                    <h5>
                      {{ field.name }}
                    </h5>
                    <ng-container *ngIf="field.type === 'text' || field.type === 'number'" >
                      <input
                        formControlName="{{ field.key }}"
                        type="{{ field.type }}"
                        
                        placeholder="{{ field.name }}"
                      />
                    </ng-container>

                    <ng-container *ngIf="field.type === 'textarea'">
                      <textarea
                        formControlName="{{ field.key }}"
                        
                        placeholder="Comments"
                      ></textarea>
                    </ng-container>

                    <ng-container *ngIf="field.type === 'date'">
                      <div
                        
                      >
                        <input
                          formControlName="{{ field.key }}"
                          ngbDatepicker
                          #dateField="ngbDatepicker"
                          type="text"
                          
                          placeholder="DD/MM/YYYY"
                        />
                        <div >
                          <div
                            
                            (click)="dateField.toggle()"
                          >
                            <i
                              
                              style="cursor: pointer;"
                            ></i>
                          </div>
                        </div>
                      </div>
                    </ng-container>

                    <ng-container *ngIf="field.type === 'dropdown'">
                      <select
                        
                        formControlName="{{ field.key }}"
                      >
                        <option [ngValue]="null">
                          Select {{ field.name }}
                        </option>
                        <option
                          *ngFor="let option of field.options"
                          [ngValue]="option.value"
                        >
                          {{ option.label }}
                        </option>
                      </select>
                      <br />
                    </ng-container>

                    <ng-container
                      *ngIf="field.type === 'checkbox_multi_choice'"
                    >
                      <div
                        
                        *ngFor="let option of field.options"
                      >
                        <p-checkbox
                          
                          [formControl]="form.controls[field.key]"
                          [value]="option.value"
                        ></p-checkbox>
                        <label 
                          >{{ option.label }}</label
                        >
                      </div>
                    </ng-container>

                    <ng-container *ngIf="field.type === 'radio'">
                      <div
                        
                        *ngFor="let option of field.options"
                      >
                        <input
                          type="radio"
                          [value]="option.value"
                          formControlName="{{ field.key }}"
                          
                        />
                        <label 
                          >{{ option.label }}</label
                        >
                      </div>
                    </ng-container>
                  </div>
                </ng-container>
              </ng-container>
            </div>
          </form>
        </div>

I am trying to window.print this form using the following function:

  download() {
    var printContents = document.getElementById("print").innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    location.reload();
  }

It works ok, apart from not all the input field values are being displayed in the print. Only the 'checkbox_multi_choice' values are showing.

After some research it seems window.print() does not capture input field values, so is there a way around this? How can i get the values to appear in the boxes when i window.print() it?

EDIT!!!

Thanks to @majusebetter, i have got the text boxes showing, however it still isn't showing the contents of the radio buttons. Below is the code so far, can anyone help me with how to edit this to get the radio buttons working?

  download() {
    let element: any = document.getElementById("print");
    const iframe = document.body.appendChild(document.createElement("iframe"));

    iframe.style.display = "none";

    const idoc = iframe.contentDocument;
    idoc.head.innerHTML = document.head.innerHTML;
    idoc.body.innerHTML = element.innerHTML;

    const inputs = element.querySelectorAll("input");
    const printInputs = idoc.body.querySelectorAll("input");

    for (let i = 0; i < inputs.length; i  ) {
      printInputs[i].value = inputs[i].value;
    }

    const selects = element.querySelectorAll("select");
    const printSelects = idoc.body.querySelectorAll("select");

    for (let i = 0; i < selects.length; i  ) {
      printSelects[i].value = selects[i].value;
    }

    window.setTimeout(() => {
      iframe.contentWindow.print();
      document.body.removeChild(iframe);
    }, 1000);
  }

CodePudding user response：

You could copy the HTML to be printed to an IFRAME element along with the styles and then copy the input/select values from the source elements to the target elements in the IFRAME:

print(element: HTMLElement): void {
    const iframe = document.body.appendChild(
        document.createElement('iframe'));

    iframe.style.display = 'none';

    const idoc = iframe.contentDocument;
    idoc.head.innerHTML = document.head.innerHTML;
    idoc.body.innerHTML = element.innerHTML;

    const inputs = element.querySelectorAll('input');
    const printInputs = idoc.body.querySelectorAll('input');

    for (let i = 0; i < inputs.length; i  ) {
        printInputs[i].value = inputs[i].value;
        printInputs[i].checked = inputs[i].checked;
    }

    const selects = element.querySelectorAll('select');
    const printSelects = idoc.body.querySelectorAll('select');

    for (let i = 0; i < selects.length; i  ) {
        printSelects[i].value = selects[i].value;
    }

    window.setTimeout(() => {
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
    }, 1000);
}

EDIT Added code for radio buttons:

printInputs[i].checked = inputs[i].checked;