Angular Material中如何获取弹窗表单值及实现编辑回显？

Hey there! Let's work through the two issues you're having with your DataTable's modals—getting form values on save for ADD, and populating the modal with row data for EDIT. I'll walk through common causes and actionable fixes with example code.

1. Fixing the "Can't Get Form Values on ADD Save" Issue #

The most common culprit here is not properly binding your form inputs to a data store, or failing to reference the correct values when triggering the save action. Let's use a Vue example (the logic translates cleanly to React/vanilla JS with minor tweaks):

Step 1: Define a Reactive Form Data Object #

First, create an object to hold your form input values (this keeps them synced with the UI):

// Vue example
data() {
  return {
    formData: {
      elementName: '',
      elementSymbol: ''
    },
    isEditMode: false,
    modalIsOpen: false
  }
}

Step 2: Bind Inputs to the Form Object #

Update your modal's form fields to link directly to formData using v-model (or equivalent for your framework):

<!-- Modal HTML -->
<div v-if="modalIsOpen" class="modal-overlay">
  <div class="modal">
    <h2>{{ isEditMode ? 'Edit Element' : 'Add New Element' }}</h2>
    <div class="form-group">
      <label>Element Name:</label>
      <input type="text" v-model="formData.elementName" placeholder="e.g. Hydrogen" />
    </div>
    <div class="form-group">
      <label>Element Symbol:</label>
      <input type="text" v-model="formData.elementSymbol" placeholder="e.g. H" />
    </div>
    <div class="modal-actions">
      <button @click="handleSave">Save</button>
      <button @click="closeModal">Cancel</button>
    </div>
  </div>
</div>

Step 3: Access Form Data in the Save Method #

Now when you click "Save", you can directly access the values from formData:

methods: {
  openAddModal() {
    // Reset form for new entry
    this.formData = { elementName: '', elementSymbol: '' };
    this.isEditMode = false;
    this.modalIsOpen = true;
  },
  handleSave() {
    // Log values to confirm they're accessible
    console.log('Submitted Form Data:', this.formData);
    
    // Add your logic to send data to the DataTable/backend
    if (!this.isEditMode) {
      this.dataTableRows.push({ ...this.formData });
    }
    
    this.closeModal();
  },
  closeModal() {
    this.modalIsOpen = false;
  }
}

2. Fixing the "EDIT Modal Doesn't Populate Row Data" Issue #

For this, you need to pass the clicked row's data to your form object when opening the modal:

Step 1: Pass Row Data to the Edit Modal #

Update your DataTable's EDIT button to send the current row as a parameter:

<!-- DataTable Row Example -->
<tr v-for="(row, idx) in dataTableRows" :key="idx">
  <td>{{ row.elementName }}</td>
  <td>{{ row.elementSymbol }}</td>
  <td>
    <button @click="openEditModal(row)">EDIT</button>
  </td>
</tr>

Step 2: Populate Form Data in the Edit Modal Method #

Add a method to copy the row's values into formData when the EDIT button is clicked:

methods: {
  openEditModal(row) {
    // Use the spread operator to avoid mutating the original row directly
    this.formData = { ...row };
    this.isEditMode = true;
    this.modalIsOpen = true;
  },
  handleSave() {
    // ... existing save logic
    if (this.isEditMode) {
      // Find the row to update and replace it with the edited data
      const targetIndex = this.dataTableRows.findIndex(item => item.elementSymbol === this.formData.elementSymbol);
      if (targetIndex !== -1) {
        this.dataTableRows[targetIndex] = { ...this.formData };
      }
    }
    // ... existing save logic
  }
}

Quick Sanity Checks #

• Double-check for typos in field names (e.g., elementName vs elementname—case matters!).
• If using vanilla JS, replace v-model with manual value setting/getting: document.getElementById('elementName').value = row.elementName and const name = document.getElementById('elementName').value.
• Ensure you're creating a copy of the row data (using ...row) instead of assigning a reference—this prevents accidental edits to the original row before saving.

Let me know if you need to adjust this to fit your specific tech stack—this pattern works for most front-end setups!

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