После нажатия на кнопку всплывающее окно не отображается в проекте angulr6

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

Похоже, вы не закрываете тег формы