html - 将用户输入的 FORM 数据发送到同一组件内的 Popup(不使用子/父组件或组件到组件)？

Question

有一个表单，用户可以在其中输入问题的答案。我希望所有用户输入的数据与相应的问题一起出现在弹出窗口中。如果用户决定不回答问题，我不希望出现该问题或与该问题相关的任何内容。有人告诉我这可以通过将输入的数据转换为 json 对象来完成。我不确定该怎么做，或者是否有更好的方法。我希望能够使用同一个组件完成这一切。

我试过这样做 How do I create popup with data user enters into a form?但无法弄清楚。我还希望能够在不创建更多组件的情况下实现这一目标。

//这是.html文件

<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>

//这是.ts文件

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() {  }   

表单数据没有以我想要的格式出现在弹出窗口中。希望它看起来像下面这样。

请求者之塔: clown

案号:328792892

来访目的:想顺路去看看。

所需资源:工具车

如果用户没有填写我不希望出现的问题之一。

Answer 1

这就是我决定回答这个问题的方式。我有一个模式弹出窗口，输出是使用此代码生成的。

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