Как создать всплывающее окно с данными, которые пользователь вводит в форму?

Question

<!--Currently making web app that is a bunch of forms. 

Я создал с помощью Visual Studio 2017 ASP.NET Core 2.2 с Angular 7. Когда пользователь заполняет форму, не все данные формы требуются. После того, как пользователь введет нужную информацию формы, я хочу, чтобы была кнопка, которая вызывает всплывающее окно, которое содержит все введенные пользователем данные и соответствующие вопросы. Если они оставят текстовое поле в форме пустым или введут н / д, я не хочу, чтобы информация появлялась во всплывающем окне. Я хочу, чтобы во всплывающем окне была кнопка для копирования данных, которые будут вставлены в форму на другом сайте.

I have created all my forms and also know how to create a popup.

Моя единственная проблема - я не знаю, как заполнить / перенести введенную пользователем информацию из формы во всплывающее окно и исключить текстовые поля, не заполненные пользователем .-->

<!-- this is th .html -->

<form [formGroup]="Form" (ngSubmit)="onSubmit()">

    <div class="form-row align-items-center">
        <div class="col-auto">
            <br />
//
            <div class="form-group">
                <label for="Select1">Select your...</label>
                <select class="form-control" formControlName="Select1">
                    <option>...</option>
                    <option>...</option>
                    <option>Other</option>

                </select>
            </div>

            <div class="form-group">
                <label for="Number">some info </label>
                <textarea class="form-control" formControlName="Number" rows="1" placeholder="Separate case numbers by comma"></textarea>
            </div>

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

            <div class="form-group">
                <label for="name">Name of info: </label>
                <textarea class="form-control" formControlName="name" rows="1"></textarea>
            </div>

            <


        </div>

    </div>

    <p>
        Form Value: {{ Form.value | json }}
    </p>
    <p>
        Form Status: {{ Form.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">
                    <p>Want user entered form data to appear on popup.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Copy Template</button>
                </div>
            </div>

        </div>
    </div>

</form>

<!--this is the .ts-->
import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validator, FormGroup, Validators, FormArray } from '@angular/forms';


@Component({
    selector: 'app-',
    templateUrl: './.component.html',
    styleUrls: ['./.component.scss']
})
/**  component*/
export class Component {



    Form = new FormGroup({
        Select1: new FormControl(''),
        Number: new FormControl('', Validators.required),
        Purpose: new FormControl(''),
        name: new FormControl('', Validators.required),

    });



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


    /** LabAccess ctor */
    constructor(private fb: FormBuilder) { }



}

Answer 1

То, что вы пытаетесь сделать, довольно просто, и у вас уже есть много вещей (например, реактивные формы), чтобы это произошло.

Ваш модал у вас в порядке, но вам, вероятно, следует использовать отдельный компонент для всплывающего окна, и для передачи ему информации это будет выглядеть так:

В свой вызывающий шаблон включите некоторый шаблон, который будет иметь шаблон для всплывающего окна или модальный или любой другой, который содержит компонент, см. Ниже:

<ng-template #formPopup>
    <form-popup
        [select1]="Form.get( 'Select1' ).value"
        [number]="Form.get( 'Number' ).value"
        [purpose]="Form.get( 'Purpose' ).value"
        [name]="Form.get( 'name' ).value">
    </form-popup>
</ng-template>

Это передаст эти значения как входные данные, как они есть в вашем компоненте при его создании:

export class FormPopupComponent {
    @Input() select1 : any;
    @Input() number : number;
    @Input() purpose : string;
    @Input() name : string;

    // Do things with these inputs as needed in this component
}

При нажатии, как вы указали, вам также придется открыть диалоговое окно или всплывающее окно или что-либо еще, что подробно описано здесь . Но вот краткое резюме - в вашем компоненте для исходного шаблона, содержащего форму, вам понадобится ссылка на ваше всплывающее окно, которое мы уже создали:

@ViewChild( 'formPopup' ) formPopupRef : TemplateRef<any>;

constructor(public dialog: MatDialog) {}

    openDialog(): void {
        const dialogRef = this.dialog.open( this.formPopupRef );
    }