如何为Angular模板驱动表单的form组件设置对应值？

你遇到的问题本质是两个核心流程没走通：一是父组件传递到子组件的编辑数据没有和子组件表单做响应式绑定导致无法回填，二是子组件修改后的数据没有正确回传给父组件触发表格行更新，以下是可直接复用的实现方案：

核心实现逻辑 #

• 父组件点击编辑时，记录当前编辑行的唯一标识（id/数组索引），同时把当前行数据深拷贝后通过props传给子组件add-items
• 子组件监听传入的编辑数据，同步到自身的表单响应式变量完成回填
• 子组件提交表单时，通过自定义事件把新表单数据+编辑行标识传回父组件
• 父组件监听子组件的提交事件，用新数据替换对应行的原始数据，触发表格视图更新

Vue 示例代码 #

父组件 view-items 关键代码 #

<template>
  <div>
    <table>
      <tr v-for="(item, index) in tableData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.count }}</td>
        <td><button @click="handleEdit(item, index)">编辑</button></td>
      </tr>
    </table>
    <add-items 
      :edit-row="currentEditRow" 
      @submit-success="handleUpdateRow"
    />
  </div>
</template>
<script>
import AddItems from './add-items.vue'
export default {
  components: { AddItems },
  data() {
    return {
      tableData: [], // 表格原始数据
      currentEditRow: null,
      currentEditIndex: -1
    }
  },
  methods: {
    handleEdit(item, index) {
      // 深拷贝避免直接修改父组件原始数据
      this.currentEditRow = JSON.parse(JSON.stringify(item))
      this.currentEditIndex = index
    },
    handleUpdateRow(newRowData) {
      // 响应式更新对应行数据
      this.tableData.splice(this.currentEditIndex, 1, newRowData)
      // 重置编辑状态
      this.currentEditRow = null
      this.currentEditIndex = -1
    }
  }
}
</script>

子组件 add-items 关键代码 #

<template>
  <div v-if="editRow">
    <input v-model="form.name" placeholder="名称" />
    <input v-model.number="form.count" placeholder="数量" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>
<script>
export default {
  props: {
    editRow: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: {
        name: '',
        count: 0
      }
    }
  },
  watch: {
    // 监听编辑数据变化同步表单
    editRow: {
      immediate: true,
      handler(val) {
        this.form = val ? { ...val } : { name: '', count: 0 }
      }
    }
  },
  methods: {
    handleSubmit() {
      // 表单校验逻辑可自行补充
      this.$emit('submit-success', { ...this.form })
    }
  }
}
</script>

React 示例代码 #

父组件 ViewItems 关键代码 #

import { useState } from 'react'
import AddItems from './add-items'

export default function ViewItems() {
  const [tableData, setTableData] = useState([])
  const [currentEditRow, setCurrentEditRow] = useState(null)
  const [currentEditIndex, setCurrentEditIndex] = useState(-1)

  const handleEdit = (item, index) => {
    setCurrentEditRow({...item})
    setCurrentEditIndex(index)
  }

  const handleUpdateRow = (newRowData) => {
    const newTable = [...tableData]
    newTable.splice(currentEditIndex, 1, newRowData)
    setTableData(newTable)
    // 重置编辑状态
    setCurrentEditRow(null)
    setCurrentEditIndex(-1)
  }

  return (
    <div>
      <table>
        {tableData.map((item, index) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.count}</td>
            <td><button onClick={() => handleEdit(item, index)}>编辑</button></td>
          </tr>
        ))}
      </table>
      <AddItems editRow={currentEditRow} onSubmit={handleUpdateRow} />
    </div>
  )
}

子组件 AddItems 关键代码 #

import { useState, useEffect } from 'react'

export default function AddItems({ editRow, onSubmit }) {
  const [form, setForm] = useState({ name: '', count: 0 })

  // 监听编辑数据变化同步表单
  useEffect(() => {
    setForm(editRow ? {...editRow} : { name: '', count: 0 })
  }, [editRow])

  const handleChange = (e) => {
    const { name, value, type } = e.target
    setForm(prev => ({
      ...prev,
      [name]: type === 'number' ? Number(value) : value
    }))
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    onSubmit({...form})
  }

  if (!editRow) return null
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={form.name} onChange={handleChange} placeholder="名称" />
      <input name="count" type="number" value={form.count} onChange={handleChange} placeholder="数量" />
      <button type="submit">提交</button>
    </form>
  )
}

常见踩坑注意 #

• 传递编辑数据时要做拷贝，不要直接修改props传入的原始数据，避免父组件数据被意外篡改
• 父组件更新表格数据时必须用框架提供的响应式更新方法：Vue不要直接修改数组某一项的值，要用splice或者替换整个数组；React要生成新数组再调用setState，否则不会触发视图更新
• 编辑提交后要及时重置编辑状态和表单，避免下次打开编辑时残留旧数据

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