Angular中如何将表单输入值传递给mat-dialog弹窗按钮？

1. 修复Dialog打开时的Data参数格式错误 #

你打开Dialog时的data参数传递格式有误，当前传入了两个独立对象，需合并为单个对象：

openDialogSerialLot(index: number){
  // 修正data参数为包含两个字段的单个对象
  let dialogRef = this.dialog.open(AddSerialLotComponent, {
    data: { Name: '', Address: '' }
  })
  
  dialogRef.afterClosed().subscribe(result => {
    console.log(result)
  })
}

2. 弹窗组件中正确初始化表单字段值 #

弹窗组件内，你将整个data对象直接赋值给了两个表单字段，需分别提取data中的对应属性赋值：

constructor(@Inject(MAT_DIALOG_DATA) public data:any,private fb:FormBuilder) { }

ngOnInit(): void {
  this.Form= this.fb.group({
    Name: [''],
    Address: [''],
  })
  // 为每个表单字段赋值对应data属性
  this.Form.get('Name').setValue(this.data.Name)
  this.Form.get('Address').setValue(this.data.Address)
}

3. 实现表单值回传父组件的逻辑 #

要把弹窗内的表单输入内容传递回父组件，需在弹窗组件中添加关闭Dialog时的参数传递逻辑：
首先在弹窗组件构造函数中注入MatDialogRef：

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

constructor(
  public dialogRef: MatDialogRef<AddSerialLotComponent>,
  @Inject(MAT_DIALOG_DATA) public data:any,
  private fb:FormBuilder
) { }

然后在弹窗模板中添加提交按钮并绑定点击事件：

<button (click)="onSubmit()">提交</button>

最后在组件类中实现提交方法，将表单值作为关闭参数传递：

onSubmit() {
  // 将表单完整值传递回父组件
  this.dialogRef.close(this.Form.value);
}

完成以上修改后，父组件的afterClosed订阅就能接收到弹窗中用户输入的表单内容了。

内容的提问来源于stack exchange，提问作者Yan