angular6 - 单击按钮弹出后未显示在 angulr6 项目中
问题描述
我在angular6做项目。我已经创建了注册表单,我一次调用了两个函数,一个用于表单提交,另一个用于打开弹出窗口,如代码所示。单击提交按钮后,表单值需要显示在弹出窗口中,并带有最终提交按钮,但在这里单击提交按钮后表单得到提交但弹出窗口没有打开。我没有得到我做错的地方。请提供任何帮助
注册.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>
注册.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 { }
点击按钮后没有弹出
解决方案
好像你没有关闭你的表单标签
推荐阅读
- java - 有没有更好的方法来编写与我相同的代码?
- c# - 慢更新查询 SQLite
- php - “我试图将文本回显到一行中,没有换行符
- scala - 自定义循环 dsl 终止于循环体中条件匹配的点
- c# - 即使登录成功,向表添加输入(通过 ASP.NET Web 应用程序和 Azure)也不会在表中注册
- python - 使用 flask-sqlalchemy:当我添加或更改模型时,我必须重新启动应用程序和 nginx
- reactjs - StackNavigator 和 DrawerNavigator 不工作反应原生
- javascript - JavaScript 中感叹号的使用
- javascript - 为什么从 JavaScript 更改变换会导致重新计算样式事件,而 CSS 动画不会?
- mysql - 创建触发器时不断出错