After clicking on button popup not showing in angulr6 project - angular6

Question

I am doing project in angular6. I have created registration form, and I have called two functions at a time, one function for form submit, and other for open popup,as shown in the code. After clicking on submit button, the form values need to be show in popup, with final submit button, but here after clicking on submit button form getting submit but popup not getting open. I am not getting where I have done mistake. Any help please
registration.html
In this file I have called two functions at a time.
<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 { }
After clicking on button not getting popup

Answer 1

Seems like you are not closing your form tag