Angular 提交后，角材料对话框窗体未重置

我有一个要求，在标题导航中有一个模型弹出窗口。我正在为弹出模型使用“角度材质”对话框。模型弹出窗口工作良好，只是我目前面临的一个问题。如果关闭模型并重新打开，则不会重置表单值。

header.component.ts
从“@angular/core”导入{Component，OnInit，ViewChild}；
从'@angular/Router'导入{Router，ActivatedRoute}；
从“@angular/material/DIALOG”导入{MatDialog，MatDialogRef，MAT_DIALOG_数据，MatDialogConfig}”；
从“../model/model.component”导入{ModelComponent}；
从“rxjs”导入{Subscription}；
从'@angular/forms'导入{NgForm}；
@组成部分({
选择器：“应用程序标题”，
templateUrl:'./header.component.html'，
样式URL:['./header.component.css']
})
导出类HeaderComponent在Init上实现{
@ViewChild（'modelForm'，{static:false}）modelForm:NgForm；
firstName:string=''；
lastName:string=''；
dialogConfig:MatDialogConfig；
dialogWithForm:MatDialogRef；
routeQueryParams$：订阅；
构造函数（专用路由器：路由器，公共对话框：MatDialog，专用路由：ActivatedRoute，）{
this.routeQueryParams$=route.queryParams.subscribe（params=>{
if（参数['dialog']）{
//这个.openDialog（）；
this.showDialog（）；
}
});
}
ngOnInit（）：void{
//这个.modelForm.resetForm（）；
}
showDialog（）{
//打开对话框组件
const dialogWithForm=this.dialog.open（ModelComponent{
宽度：“40%”，
//高度：“400px”，
数据：{firstName:this.firstName，lastName:this.lastName}
});
//当用户关闭对话框时
dialogWithForm.afterClosed（）.subscribe（结果=>{
log（“您已经关闭了对话框”）；
如果（结果）{
//这个.modelForm.resetForm（）；
this.router.navigate（['/test']，{relativeTo:this.route}）；
//这个.modelForm.resetForm（）；
//这个.modelForm.reset（）；
}
//这个.modelForm.resetForm（）；
//此.dialogWithForm.close（[]）；
//this.dialogWithForm.close（this.modelForm.value）；
此参数为.dialogWithForm.close（）；
});
//这个.modelForm.reset（）；
}
恩贡德斯特罗（）{
此.routeQueryParams$.unsubscribe（）；
}
}
model.component.ts
从“@angular/core”导入{Component，OnInit，Inject，ViewChild}；
从“@angular/material/DIALOG”导入{MatDialog，MatDialogRef，MAT_DIALOG_DATA}；
从'@angular/Router'导入{Router}；
从'@angular/forms'导入{NgForm}；
导出接口对话框数据{
名字：字符串；
lastName:string；
}
@组成部分({
选择器：“应用程序模型”，
templateUrl:'./model.component.html'，
样式URL:['./model.component.css']
})
导出类ModelComponent实现OnInit{
@ViewChild（'modelForm'，{static:false}）modelForm:NgForm；
firstName:string=''；
lastName:string=''；
构造函数（私有路由器：路由器，公共dialogRef:MatDialogRef，@Inject（MAT_dialogu数据）公共数据：DialogData）{}
ngOnInit（）：void{
//这个.modelForm.reset（）；
}
onNoClick（）：void{
this.dialogRef.close（）；
this.router.navigateByUrl（'/contact'）；
}
}

header.component.html
连接
model.component.html
创建Modekl




取消
创造

您将数据绑定到输入字段而不是表单，因此必须重置这些值。 如果希望对话框在显示时为“空”，则可以在打开对话框之前重置值，如下所示：

  showDialog(){
    this.firstName = "";
    this.lastName = "";
    // Opening the dialog component
    const dialogWithForm = this.dialog.open(ModelComponent, {
      ...

---

好吧，您有一个表单，但是表单没有值-您单独绑定输入控件-因此重置表单值没有效果。那么我如何清除表单内容？有办法吗？请建议如果（结果）{this.router.navigate（['/test']，{relativeTo:this.route}）；}否则{this.firstName=''；this.lastName=''；}我试图像上面那样重置表单控件。但仍然不起作用；嗯。。。在打开对话框之前，您可以尝试在ShowDialog（）方法中将this.firstName和this.lasName初始化为“”（就像您所做的那样）？是的，它成功了！非常感谢。。