将用户输入的FORM数据发送到同一组件中的弹出窗口（不使用子/父组件或组件之间的组件）？

Question

Have a form where user enters answers to questions. I want all user entered data to appear in a popup along with the corresponding question. If the user decides not to answer a question I do not want the question or anything associated with that question to appear. I was told this could be done by converting entered data to a json object. I am not sure how to do this or if there is a better way. I want to be able to do it all withing the same component.

I tried doing this How do I create popup with data user enters into a form? but could not figure it out. I also want to be able to achieve this without creating more components.

//This is the .html file

<div  ng-app="DemoApp" ng-controller="DemoController" class="form-row align-items-center">
    <div class="col-auto">
        <br />

        <div class="form-group">
            <label for="controlSelect1" >Select your tower...</label>
            <select class="form-control" name="exampleFormControlSelect1" formControlName="controlSelect1">
                <option></option>
                <option>Clown</option>
                <option>Clampionship</option>                  
                <option>Other</option>
            </select>
        </div>

        <div class="form-group">
            <label for="caseNumber">Case Number(s): </label>
            <textarea class="form-control" name="caseNumber" formControlName="caseNumber" rows="1" placeholder="Separate case numbers by comma"></textarea>
        </div>

        <div class="form-group">
            <label for="visitPurpose">Purpose of Lab Visit: </label>
            <textarea class="form-control" name="visitPurpose" formControlName="visitPurpose" rows="1"></textarea>
        </div>                    

        <label for="needRescources">Need any Lab Rescource(s)?</label>
        <br />
        <div class="form-check form-check-inline" name="labRescource" formControlName="labRescource">

            <input type="checkbox" class="form-check-input" formControlName="labAdmin">
            <label class="form-check-label" for="Lab Admin">Lab Admin&nbsp;&nbsp;</label>

            <input type="checkbox" class="form-check-input" formControlName="toolCart">
            <label class="form-check-label" for="Tool Cart">Tool Cart&nbsp;&nbsp;</label>

            <input type="checkbox" class="form-check-input" formControlName="other">
            <label class="form-check-label" for="Other">Other</label>

        </div>
        <br /><br />
        <div class="form-group">
            <label for="additionalNotes">Any additional notes? </label>
            <textarea class="form-control" name="additionalNotes" formControlName="additionalNotes" rows="1"></textarea>
        </div>


    </div>

</div>

<p>
    Form Value: {{ labForm.value | json }}
</p>
<p>
    Form Status: {{ labForm.status }}
</p>

<button type="submit" class="btn btn-default" [disabled]="!labForm.valid">Build Lab Request</button>

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Template</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title text-left">Lab Access Template</h4>
            </div>
            <div class="modal-body">
                <label for="exampleFormControlSelect1">Requester's Tower:</label>
                <br /><label for="caseNumber">Case Number(s): </label>
                <br /><label for="visitPurpose">Purpose of Lab Visit: </label>                   
                <br /><label for="needRescources">Need any Lab Rescource(s)?</label>


                {{ labForm.value | json }}
         </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Copy Template</button>

            </div>
        </div>

    </div>
</div>

//This is the .ts file

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from'@angular/forms';


@Component({
selector: 'app-lab-access',
templateUrl: './lab-access.component.html',
styleUrls: ['./lab-access.component.scss']

})

/** LabAccess component*/
export class LabAccessComponent {


labForm = new FormGroup({
    ControlSelect1: new FormControl(''),
    caseNumber: new FormControl('', Validators.required),
    visitPurpose: new FormControl('', Validators.required),


    /**lab rescource check boxes*/
    labAdmin: new FormControl(''),
    toolCart: new FormControl(''),        
    other: new FormControl(''),

});



onSubmit() {
    console.warn(this.labForm.value);
}

labAccessForm: FormGroup;

/** LabAccess ctor */
constructor() {  }   

}

The form data is not appearing on popup in the format I desire. Would like it to look like below.

Requestor's Tower: Clown

Case Number: 328792892

Purpose of Visit: Felt like dropping by.

Needed Resources: Tool Cart

If user did not fill out one of the questions I do not want question appear.

Answer 1

This is how I decided to answer the question. I have a modal popup and the output is generated using this code.

<div *ngIf="form.value.Num1">Part Number(s): {{form.value.Num1}}</div>