Angular 4响应式表单中多行自定义验证器的校验问题

Hey Joseph, 这个场景我在做库存配料管理模块时刚好遇到过，核心思路就是先计算所有待转移条目的数量总和，再和单个批准数量做对比校验，同时要兼顾前端即时反馈和后端安全校验，避免前端被绕过。下面分两部分给你具体实现方案：

一、前端实时校验（提升用户体验） #

前端可以监听每个待转移数量输入框的变化，实时计算总和并对比，即时给出提示，还能禁用非法提交。这里以原生JS为例：

// 从后端获取或页面渲染时拿到的批准数量
const approvedQty = 150;

// 获取所有待转移数量输入框（假设类名为transfer-qty）
const qtyInputs = document.querySelectorAll('.transfer-qty');
// 用来展示提示的元素
const tipEl = document.getElementById('check-tip');
// 提交按钮
const submitBtn = document.getElementById('submit-form');

// 计算待转移总数量的工具函数
function getTotalTransferQty() {
  let total = 0;
  qtyInputs.forEach(input => {
    // 处理空值、非数字，默认按0计算
    const qty = parseFloat(input.value.trim()) || 0;
    // 额外校验单个数量不能为负
    if (qty < 0) {
      input.value = 0;
    }
    total += qty;
  });
  return total;
}

// 绑定输入事件，实时校验
qtyInputs.forEach(input => {
  input.addEventListener('input', () => {
    const total = getTotalTransferQty();
    if (total > approvedQty) {
      tipEl.textContent = `⚠️ 待转移总数量(${total})已超过批准数量(${approvedQty})，请调整`;
      tipEl.style.color = '#dc2626';
      submitBtn.disabled = true;
    } else {
      tipEl.textContent = `✅ 待转移总数量(${total})符合要求`;
      tipEl.style.color = '#16a34a';
      submitBtn.disabled = false;
    }
  });
});

// 如果有新增/删除行的操作，要重新绑定事件
function reBindQtyEvent() {
  const newInputs = document.querySelectorAll('.transfer-qty');
  newInputs.forEach(input => {
    input.removeEventListener('input', () => {}); // 先移除旧事件
    input.addEventListener('input', () => {
      const total = getTotalTransferQty();
      // 重复上面的校验逻辑...
    });
  });
}

二、后端安全校验（防止恶意请求） #

前端校验只是给用户友好提示，必须在后端再做一次校验，避免前端被篡改后提交非法数据。这里以Python Flask为例：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/check-transfer', methods=['POST'])
def check_transfer():
    try:
        req_data = request.get_json()
        # 获取批准数量和待转移条目列表
        approved_qty = req_data.get('approved_quantity', 0)
        transfer_items = req_data.get('transfer_items', [])
        
        # 校验批准数量合法性
        if approved_qty < 0:
            return jsonify({
                'code': 400,
                'msg': '批准数量不能为负数'
            }), 400
        
        # 计算总待转移数量，同时校验每个条目数量合法性
        total_transfer = 0
        for item in transfer_items:
            qty = item.get('transfer_quantity', 0)
            if qty < 0:
                return jsonify({
                    'code': 400,
                    'msg': '单个待转移数量不能为负数'
                }), 400
            total_transfer += qty
        
        # 对比总和与批准数量
        if total_transfer > approved_qty:
            return jsonify({
                'code': 400,
                'msg': f'待转移总数量({total_transfer})超过批准数量({approved_qty})'
            }), 400
        
        return jsonify({
            'code': 200,
            'msg': '校验通过'
        })
    except Exception as e:
        return jsonify({
            'code': 500,
            'msg': f'服务器错误：{str(e)}'
        }), 500

if __name__ == '__main__':
    app.run(debug=True)

三、注意边界情况 #

• 要处理空值、非数字、负数的输入，避免计算出错
• 如果是动态新增/删除待转移条目，要确保新行的输入框也能被监听计算
• 批准数量如果是动态变更的（比如后端实时更新），要确保前端拿到的是最新值

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