我正在用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 { }
点击按钮后不会弹出
答案 0 :(得分:0)
似乎您没有关闭表单标签