ngx-formly中JSON Schema动态多选表单的验证问题解析

在使用ngx-formly处理JSON Schema生成表单时，开发人员可能会遇到一个关于动态多选表单验证的常见问题。本文将深入分析这个问题产生的原因，并提供专业的解决方案。

问题现象

当使用JSON Schema定义多选下拉框时，如果初始定义了枚举值(enum)，但后续通过expressionProperties动态修改选项(options)，表单验证仍然会基于初始的enum值进行校验，而不是使用动态更新的选项值。

问题根源

这个问题的核心在于ngx-formly的JSON Schema转换机制。当Schema转换器处理包含enum定义的多选字段时，会自动添加基于这些enum值的验证规则。这些验证规则在字段初始化时就被固定下来，不会随着后续options的动态变化而更新。

解决方案

要解决这个问题，我们需要在转换后的字段配置中显式地移除或更新验证规则。以下是两种可行的解决方案：

方案一：移除自动生成的验证器

const field = formlyJsonschema.toFieldConfig(JSON.parse(this.json));

const multiSelectField = field.fieldGroup[0];
// 移除自动添加的验证器
delete multiSelectField.validators;
delete multiSelectField.asyncValidators;

// 动态设置选项
multiSelectField.expressions = {
  'props.options': () => [
    { value: 'Dynamic option1', label: 'Dynamic option1' },
  ],
};

方案二：自定义验证逻辑

如果需要保留验证功能，可以自定义验证逻辑来匹配动态选项：

multiSelectField.validators = {
  validation: [
    (control: FormControl) => {
      const currentOptions = multiSelectField.props.options.map(opt => opt.value);
      if (Array.isArray(control.value)) {
        return control.value.every(val => currentOptions.includes(val)) 
          ? null 
          : { invalidSelection: true };
      }
      return null;
    }
  ]
};

最佳实践

1. 对于完全动态的选项，建议在Schema中不定义enum，而是通过props.options直接提供选项
2. 如果必须使用enum，在转换后手动处理验证逻辑
3. 考虑使用formly的extension机制来统一处理这类场景

总结

ngx-formly的JSON Schema转换器为了保持Schema的完整性，会严格遵守Schema中定义的约束条件。当我们需要实现动态行为时，需要理解这种机制并在转换后进行适当的调整。通过手动控制验证逻辑，我们可以实现既符合业务需求又保持良好用户体验的动态表单。