CxJS中ValidationGroup无法识别折叠元素，折叠后误判表单有效

我用可见条件实现了一个可折叠元素，折叠区域内的表单元素需要满足必填校验，因此使用ValidationGroup来确保表单合规。展开状态下校验正常，但折叠区域后，ValidationGroup无法识别区域内的表单，错误判定表单有效。

问题代码示例 #

import { Button, HtmlElement, TextField, ValidationGroup } from "cx/widgets";

export const App = (
  <cx>
    <Button
      text="Collapse/Expand"
      onClick={(e, { store }) => store.toggle("visibleCondition")}
    />
    <ValidationGroup invalid-bind="invalid">
      <div visible-bind="visibleCondition">
        <TextField label="Label" required asterisk />
      </div>
    </ValidationGroup>
    // 表单为空时应该判定为无效，但折叠后下方文本会错误显示
    <div
      visible-expr="!{invalid}"
      text="This is visible if form is not invalid"
      style="margin-top:20px;"
    />
  </cx>
);

解决方案 #

问题根源在于visible-bind会在元素不可见时直接从DOM中移除该元素，导致ValidationGroup无法检测到内部的TextField。我们可以通过控制元素的样式来实现折叠效果，保留元素在DOM中的存在，让校验逻辑正常运行。

修改后的代码：

import { Button, HtmlElement, TextField, ValidationGroup } from "cx/widgets";

export const App = (
  <cx>
    <Button
      text="Collapse/Expand"
      onClick={(e, { store }) => store.toggle("visibleCondition")}
    />
    <ValidationGroup invalid-bind="invalid">
      <div style-bind="visibleCondition ? {} : {visibility: 'hidden', height: 0, overflow: 'hidden'}">
        <TextField label="Label" required asterisk />
      </div>
    </ValidationGroup>
    <div
      visible-expr="!{invalid}"
      text="This is visible if form is not invalid"
      style="margin-top:20px;"
    />
  </cx>
);

通过style-bind动态设置visibility: hidden、height: 0和overflow: hidden，元素虽然视觉上不可见，但仍保留在DOM结构中，ValidationGroup就能持续检测内部必填字段的状态，折叠状态下也能正确判定表单有效性。

内容的提问来源于stack exchange，提问作者Stefani Tovilović