Mat-Dialog传值填充输入：点击表格行仅填充姓名字段实现方案

核心修改逻辑 #

原有点击行全量填充表单的逻辑是直接将整行数据对象传入表单的patchValue/setValue方法，只要修改传参，仅保留姓名字段的映射关系即可。 #

具体操作步骤 #

• 找到表格行绑定的点击事件处理函数，一般是类似(click)="selectRow(row)"绑定的方法
• 找到方法内给弹窗内表单赋值的代码段，原有全量赋值的代码通常写法如下：

// 原有全量填充逻辑（需要修改）
selectRow(row: any) {
  this.dialogRef.afterOpened().subscribe(() => {
    this.form.patchValue(row); // 整行对象传入，会覆盖所有同名字段
  })
}

• 将patchValue的入参替换为仅包含姓名字段的对象，字段名需要和你表单内姓名输入框对应的formControlName、行数据内的姓名字段名匹配：

// 修改后：仅填充姓名字段
selectRow(row: any) {
  this.dialogRef.afterOpened().subscribe(() => {
    this.form.patchValue({
      // 示例：如果表单姓名字段控件名为name，行数据内姓名字段也为name，直接写name: row.name即可
      // 如果字段名不一致，比如表单控件是userName，行数据是fullName，就写userName: row.fullName
      name: row.name
    });
    // 可选：选完自动关闭弹窗的话放开下面注释
    // this.dialogRef.close();
  })
}

可选优化项 #

• 选中行高亮：给表格行加类绑定[class.row-selected]="currentSelected?.id === row.id"，在点击事件内同步记录this.currentSelected = row，再给row-selected类写高亮样式即可
• 防重复触发：加判断如果当前点击行和已选中行id一致，直接return不执行后续赋值逻辑

注意：赋值时不要直接修改row原对象，避免表格数据源被意外篡改，所有值操作仅针对表单控件进行。

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