Rails7中Exempt下拉框控制Tax Id字段显隐与可用性的问题排查

核心问题 #

当前代码存在三个关键问题导致Tax Id字段无法正常显示：

1. 初始渲染的显示判断不匹配：视图中#customer_tax_settings_tax_id_wrap的显示逻辑使用了小写开头的Reverse/Exempt，但实际下拉选项的value是大写的REVERSE/EXEMPT，初始状态下容器会错误隐藏。
2. JS未控制容器显隐：仅修改了输入框的disabled和required属性，但未同步控制外层容器的显示/隐藏，导致输入框即使启用也不可见。
3. 重复嵌套fields_for：Tax Id字段外层重复使用了form.fields_for :tax_settings，会生成错误的字段ID和名称，导致JS无法正确选中输入框，同时后端无法正常接收数据。

具体修改步骤 #

1. 修正视图初始显示判断（tax_settings_component.slim） #

将容器的显示判断数组改为与option value一致的大写形式，同时移除重复的fields_for嵌套：

= render Customers::Form::ExemptSelectComponent.new(form:, field: :exempt, include_blank: true, required: true, disabled:)
#customer_tax_settings_tax_id_wrap style="#{'display: none;' unless customer.tax_settings&.exempt.in?(%w[REVERSE EXEMPT])}"
  = render Forms::TextFieldComponent.new(form:, field: :tax_id, required: true, disabled: !customer.tax_settings&.exempt.in?(%w[REVERSE EXEMPT]), label: t('.tax_id'))

2. 更新JS逻辑控制容器显隐（form_controller.js） #

修改toggleTaxId函数，添加外层容器的显示/隐藏控制，同时优化输入框的选择方式：

function toggleTaxId(event) {
  const exemptSelect = event.target;
  const taxIdWrap = document.querySelector("#customer_tax_settings_tax_id_wrap");
  const taxIdInput = taxIdWrap.querySelector("#customer_tax_settings_tax_id");
  const shouldShowTaxId = exemptSelect.value === "REVERSE" || exemptSelect.value === "EXEMPT";
  
  // 控制Tax Id容器的显示/隐藏
  taxIdWrap.style.display = shouldShowTaxId ? 'block' : 'none';
  // 控制输入框的禁用状态与必填属性
  taxIdInput.disabled = !shouldShowTaxId;
  taxIdInput.required = shouldShowTaxId;
}

验证修改效果 #

1. 勾选复选框后，Exempt下拉框正常显示。
2. 选择REVERSE或EXEMPT选项时，Tax Id字段容器自动显示，输入框可编辑且标记为必填。
3. 选择默认空值时，Tax Id容器隐藏，输入框禁用且取消必填。

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