Question

我正在用angular6做项目。我已经创建了注册表单，并且一次调用了两个函数，一个函数用于表单提交，另一个函数用于打开弹出窗口，如代码所示。单击提交按钮后，表单值需要在弹出窗口中显示，并带有最终的提交按钮，但是在这里，单击提交按钮后，表单将获得提交但弹出窗口没有打开。我没有走错地方。任何帮助请

registration.html

在此文件中，我一次调用了两个函数。

<nav class="navbar navbar-expand-lg">Header
</nav>
<div class="container">
   <form [formGroup]="addForm" (ngSubmit)=[onSubmit(addForm.value),openModal()]> 

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

registration.ts

    import { Component, OnInit } from '@angular/core';
    import {FormBuilder, FormGroup, Validators} from "@angular/forms";
    import {Router} from "@angular/router";
    import {Inject} from '@angular/core';
    import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
    import { DisplayDataComponent } from '../display-data/display-data.component';

    @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, private router: Router, public dialog: MatDialog) { }

    addForm: FormGroup;

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

     onSubmit(data) {
        console.log(data);`
        openModal(){
   console.log("calling")
    const dialogRef = this.dialog.open(DisplayDataComponent, {
      width: '250px',
          });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FormGroup } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentParentRegistrationComponent } from './student-parent-registration/student-parent-registration.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { DisplayComponent } from './display/display.component';
import { DisplayDataComponent } from './display-data/display-data.component';
import {MatDialogModule} from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    StudentParentRegistrationComponent,
    DisplayComponent,

    DisplayDataComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    BrowserAnimationsModule,
    BsDatepickerModule.forRoot()
  ],

  entryComponents: [
  DisplayDataComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

点击按钮后不会弹出

Answer 1

似乎您没有关闭表单标签

单击按钮弹出窗口后，未在angulr6项目中显示

1 个答案: