单击提交按钮后如何在弹出窗口中显示表单数据

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

单击提交按钮后如何在弹出窗口中显示表单数据

How to display form data in popup after clicking on submit button

angular6