Formily 表单分步校验的进阶实践

在阿里巴巴开源的 Formily 表单解决方案中，formStep 组件是处理多步骤表单的利器。但在实际业务场景中，开发者常常会遇到一个典型需求：如何在最后提交时一次性校验所有步骤的字段，而不仅仅是当前步骤的字段？

需求背景

在复杂表单场景中，特别是那些包含保存功能的表单，通常会有以下特点：

1. 保存操作时不进行字段校验
2. 最终提交时才需要全面校验所有步骤的字段
3. 需要确保所有步骤的数据都符合业务规则

技术实现方案

Formily 提供了灵活的解决方案来处理这种需求。虽然 formStep 组件默认只校验当前步骤的字段，但我们可以通过以下方式实现全步骤校验：

方案一：手动遍历校验

form.query().forEach(field => field.validate())

这种方法直接利用 Formily 的 API 遍历所有字段进行校验，简单直接，适用于大多数场景。

方案二：自定义提交逻辑

在提交函数中，我们可以先执行全量校验，再处理提交逻辑：

const handleSubmit = async () => {
  const results = await Promise.all(
    form.query().map(field => field.validate())
  );
  
  const hasError = results.some(result => result.type === 'error');
  if (hasError) return;
  
  // 提交逻辑...
}

最佳实践建议

1. 性能考虑：对于字段特别多的表单，全量校验可能影响性能，建议按需校验
2. 用户体验：可以在校验失败时自动跳转到第一个出错的步骤
3. 错误处理：收集所有错误信息统一展示，提升用户体验
4. 缓存机制：对于保存操作，可以考虑缓存未通过校验的数据

总结

Formily 虽然默认不提供全步骤强制渲染的功能，但通过其灵活的 API 完全可以实现这一需求。开发者应该根据具体业务场景选择最适合的实现方式，在功能完整性和用户体验之间取得平衡。