AngularJS点击动态添加产品表单及视图更新的技术问询

嘿，我来帮你搞定这个多产品动态添加表单的需求！针对你提到的两个问题，我给你拆解一下解决方案，不管用前端框架还是原生JS都能实现：

问题1：点击按钮如何更新视图？是否需要维护计数？ #

其实不需要单独维护计数，更优雅的方式是用一个数组来管理所有产品的表单状态（框架场景），或者通过DOM元素的数量来动态生成（原生JS场景）：

用React（框架）实现的思路 #

我们可以用useState维护一个产品数组，数组里的每个元素对应一个产品的表单数据。点击“Add more Product”时，就往数组里添加一个新的空产品对象，然后通过map方法自动渲染出对应的表单：

import { useState } from 'react';

function ProductForm() {
  // 初始化数组，默认包含一个空产品表单
  const [products, setProducts] = useState([{ name: '', price: '', quantity: '' }]);

  // 添加新产品表单
  const addMoreProduct = () => {
    setProducts([...products, { name: '', price: '', quantity: '' }]);
  };

  // 更新单个产品的输入值
  const updateProductField = (index, field, value) => {
    const updatedProducts = [...products];
    updatedProducts[index][field] = value;
    setProducts(updatedProducts);
  };

  // 删除指定的产品表单
  const removeProduct = (index) => {
    const updatedProducts = products.filter((_, i) => i !== index);
    setProducts(updatedProducts);
  };

  return (
    <div>
      {products.map((product, index) => (
        <div key={index} className="product-form" style={{ margin: '10px 0', padding: '10px', border: '1px solid #eee' }}>
          <input
            type="text"
            placeholder="Product Name"
            value={product.name}
            onChange={(e) => updateProductField(index, 'name', e.target.value)}
            style={{ marginRight: '10px' }}
          />
          <input
            type="number"
            placeholder="Price"
            value={product.price}
            onChange={(e) => updateProductField(index, 'price', e.target.value)}
            style={{ marginRight: '10px' }}
          />
          <input
            type="number"
            placeholder="Quantity"
            value={product.quantity}
            onChange={(e) => updateProductField(index, 'quantity', e.target.value)}
            style={{ marginRight: '10px' }}
          />
          <button onClick={() => removeProduct(index)} disabled={products.length === 1}>
            Remove
          </button>
        </div>
      ))}
      <button onClick={addMoreProduct} style={{ marginTop: '10px' }}>
        Add more Product
      </button>
    </div>
  );
}

这里数组的长度就是表单的数量，完全不需要额外维护计数，视图会自动根据数组的变化更新。

原生JS实现的思路 #

如果不用框架，我们可以先写一个表单模板，点击按钮时克隆模板并添加到容器中，通过DOM元素的数量来控制表单数量：

<div id="products-container">
  <!-- 初始表单 -->
  <div class="product-form" style="margin: 10px 0; padding: 10px; border: 1px solid #eee;">
    <input type="text" placeholder="Product Name" style="margin-right: 10px;">
    <input type="number" placeholder="Price" style="margin-right: 10px;">
    <input type="number" placeholder="Quantity" style="margin-right: 10px;">
    <button class="remove-btn">Remove</button>
  </div>
</div>
<button id="add-more-btn" style="margin-top: 10px;">Add more Product</button>
<button id="submit-btn" style="margin-left: 10px;">Submit</button>

<script>
const addBtn = document.getElementById('add-more-btn');
const container = document.getElementById('products-container');
const submitBtn = document.getElementById('submit-btn');

// 添加新表单
addBtn.addEventListener('click', () => {
  const templateForm = document.querySelector('.product-form');
  const newForm = templateForm.cloneNode(true);
  // 清空克隆表单的输入值
  newForm.querySelectorAll('input').forEach(input => input.value = '');
  container.appendChild(newForm);
});

// 删除表单（至少保留一个）
container.addEventListener('click', (e) => {
  if (e.target.classList.contains('remove-btn')) {
    const form = e.target.closest('.product-form');
    if (container.children.length > 1) {
      form.remove();
    }
  }
});
</script>

问题2：如何收集所有产品的数据并提交到数据库？ #

这部分也分两种场景：

框架场景（React） #

因为我们已经用数组维护了所有产品的状态，提交时直接把products数组传给后端接口就行：

const handleSubmit = async () => {
  try {
    await fetch('/api/add-products', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ products })
    });
    alert('Products added successfully!');
    // 重置表单
    setProducts([{ name: '', price: '', quantity: '' }]);
  } catch (error) {
    console.error('Error adding products:', error);
  }
};

// 在组件里添加提交按钮
<button onClick={handleSubmit} style={{ marginTop: '10px', marginLeft: '10px' }}>
  Submit All Products
</button>

原生JS场景 #

提交时遍历所有表单元素，把每个表单的输入值整理成数组，再发给后端：

submitBtn.addEventListener('click', () => {
  const products = [];
  const forms = document.querySelectorAll('.product-form');
  
  forms.forEach(form => {
    const name = form.querySelectorAll('input')[0].value;
    const price = form.querySelectorAll('input')[1].value;
    const quantity = form.querySelectorAll('input')[2].value;
    products.push({ name, price, quantity });
  });

  // 发送请求到后端
  fetch('/api/add-products', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ products })
  })
  .then(res => res.json())
  .then(data => {
    alert('Products added successfully!');
    // 重置表单
    container.innerHTML = `
      <div class="product-form" style="margin: 10px 0; padding: 10px; border: 1px solid #eee;">
        <input type="text" placeholder="Product Name" style="margin-right: 10px;">
        <input type="number" placeholder="Price" style="margin-right: 10px;">
        <input type="number" placeholder="Quantity" style="margin-right: 10px;">
        <button class="remove-btn">Remove</button>
      </div>
    `;
  })
  .catch(error => console.error('Error:', error));
});

这样不管是框架还是原生JS，都能完美实现多产品动态添加和提交的需求啦！

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