ngx-formly中多选框(multicheckbox)的必填验证问题解析

问题背景

在使用ngx-formly构建表单时，开发者遇到了一个关于多选框(multicheckbox)必填验证的特殊场景。通常情况下，多选框会使用数组类型(array)来存储选中的值，但在这个案例中，由于后端数据库设计的原因，需要将多选框的值以JSON字符串的形式存储，格式如{"a":"true"}。

核心问题

开发者在尝试使用required验证时发现：

1. 初始状态下，当没有任何选项被选中时，必填验证能够正常工作
2. 但在后续交互中（如先选择选项再取消所有选择），必填验证却失效了

技术分析

多选框的两种数据类型

ngx-formly中的多选框组件通常支持两种数据类型：

1. 数组类型(array)：默认类型，将选中的值存储为数组形式，如['a', 'b']
2. 对象类型(object)：将选中的值存储为键值对对象，如{"a": true, "b": true}

验证机制差异

required验证器的工作原理是检查字段是否有值。对于不同类型的数据结构，其判断逻辑有所不同：

• 数组类型：检查数组长度是否大于0
• 对象类型：检查对象是否有任何属性值为true

在本案例中，由于使用了对象类型存储数据，当用户取消所有选择后，对象可能变为空对象{}，而required验证器可能无法正确识别这种状态变化。

解决方案

推荐方案：自定义验证器

组织成员aitboudad建议使用自定义验证器来解决这个问题。自定义验证器可以更精确地控制验证逻辑，特别是对于这种特殊的数据格式要求。

实现示例

export function multicheckboxRequiredValidator(control: FormControl): ValidationErrors {
  const value = control.value;
  if (!value) return { required: true };
  
  // 对于JSON字符串格式的检查
  if (typeof value === 'string') {
    try {
      const parsed = JSON.parse(value);
      return Object.values(parsed).some(v => v === true) ? null : { required: true };
    } catch {
      return { required: true };
    }
  }
  
  // 对于普通对象格式的检查
  return Object.values(value).some(v => v === true) ? null : { required: true };
}

在表单配置中使用

fields = [
  {
    key: 'multicheckboxField',
    type: 'multicheckbox',
    templateOptions: {
      label: '多选框',
      options: [...],
      required: true,
      validators: {
        validation: [multicheckboxRequiredValidator]
      }
    }
  }
];

最佳实践建议

1. 前后端数据格式一致性：尽可能保持前后端数据格式一致，避免因格式转换带来的复杂性和潜在问题
2. 验证逻辑明确性：对于特殊数据格式，自定义验证器通常比内置验证器更可靠
3. 用户体验考虑：确保验证反馈及时且明确，特别是在多选框这种交互复杂的组件上

总结

在ngx-formly中使用多选框组件时，理解其数据存储方式和验证机制非常重要。当遇到标准验证器无法满足需求时，自定义验证器提供了灵活且强大的解决方案。特别是在处理非标准数据格式时，自定义验证器能够确保表单验证的准确性和可靠性。