Within my HTML code lies a form, complete with a variety of fields:

        <div class="card-body" id="print">
          <form [formGroup]="form">
                  <div class="text-muted" *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 }}"
                        class="form-control"
                        placeholder="{{ field.name }}"
                      />
                    </ng-container>

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

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

                    <ng-container *ngIf="field.type === 'dropdown'">
                      <select
                        class="custom-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
                        class="form-check mb-1"
                        *ngFor="let option of field.options"
                      >
                        <p-checkbox
                          class="mr-1"
                          [formControl]="form.controls[field.key]"
                          [value]="option.value"
                        ></p-checkbox>
                        <label class="form-check-label"
                          >{{ option.label }}</label
                        >
                      </div>
                    </ng-container>

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

When attempting to print this form, I use the following function:

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

The function works, but only the values of the 'checkbox_multi_choice' fields are displayed in the print. How can I ensure all input field values are shown when printing?

UPDATE

Credit to @majusebetter, I have managed to display the text box values, but the radio button contents are still not showing. The updated code is provided below. Can someone assist in enabling the radio buttons to display correctly?

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