Как отобразить данные формы во всплывающем окне после нажатия кнопки «Отправить»

Question

Я делаю проект в angular6. Я создал регистрационную форму. После нажатия на кнопку мне нужно отобразить эти значения формы во всплывающем окне с кнопкой отправки, и после нажатия на кнопку отправки, форма должна быть отправлена. Я получаю эти значения формы на консоли, но не понимаю, как отобразить эти значения формы во всплывающем окне. Любая помощь, пожалуйста. registration.html

<nav class="navbar navbar-expand-lg">Header
</nav>
<div class="container">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit(addForm.value)" (onclick)="openPopup()">
    <h2 class="text-center mt-3">Registration Form</h2>
    <div class="card-header mt-3 mb-3">Student Registration</div>

    <div class="row">
      <div class="col-sm-6">
        <div class="form-group">
          <label for="usn"><strong>USN</strong></label>
          <input type="usn" formControlName="usn" placeholder="usn" name="usn" class="form-control" id="usn">
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group">
          <label for="firstName"><strong>First Name</strong></label>
          <input type="firstName" formControlName="firstName" placeholder="FirstName" name="firstName" class="form-control" id="firstName" ngModel>
        </div>
      </div>
    </div>
 <button class="btn btn-success mx-auto d-block">Submit</button>
  </form>
</div>
<div class="card-footer">
  footer
</div>

registration.ts

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


@Component({
  selector: 'app-student-parent-registration',
  templateUrl: './student-parent-registration.component.html',
  styleUrls: ['./student-parent-registration.component.css']
})
export class StudentParentRegistrationComponent implements OnInit {


  constructor(private formBuilder: FormBuilder) { }

  addForm: FormGroup;



  ngOnInit() {
    console.log("ngOnInit called")
      this.addForm = this.formBuilder.group({
      usn:[''],
      firstName:['']
})
}
onSubmit(data) {
    console.log(data);

    }
  }
}

Answer 1

Если вы следовали подходу React, вы можете получить данные формы с помощью кода ниже

this.packageEditForm.controls["formControlName"].value