ng-alain动态表单数组类型默认值校验问题解析

问题背景

ng-alain作为基于Angular的企业级中后台前端解决方案，其动态表单组件(Schema Form)是核心功能之一。在使用数组类型的动态表单时，开发者可能会遇到一个特殊的校验问题：当表单包含数组类型字段且未设置初始值时，表单的提交按钮在初始状态下仍然可点击，这与常规的表单校验预期不符。

问题现象

具体表现为：

1. 创建一个包含数组类型字段的动态表单
2. 该数组字段被标记为必填项
3. 表单初始化时未给该数组字段赋初始值
4. 此时表单的提交按钮却处于可点击状态

技术分析

这个问题源于ng-alain底层使用的AJV(Another JSON Schema Validator)校验库的默认行为。AJV在校验数组类型时，对于空数组和未定义(undefined)状态的处理存在差异：

• 空数组([])会被视为有效值
• 未定义的数组则会被跳过校验

ng-alain默认启用了AJV的严格模式(strictSchema: true)，这导致了上述校验行为的不一致。

解决方案

临时解决方案

可以通过全局配置将AJV的strictSchema设置为false来临时解决这个问题：

const alainConfig: AlainConfig = {
  sf: {
    ajv: {
      strictSchema: false
    }
  }
};

推荐解决方案

1. 显式初始化数组字段：在表单初始化时，为数组类型字段显式赋值为空数组

this.formData = {
  arrayField: []
};

2. 自定义校验规则：通过自定义校验函数确保数组字段在未填写时无法提交

schema = {
  properties: {
    arrayField: {
      type: 'array',
      ui: {
        validator: (value: any[]) => {
          if (!value || value.length === 0) {
            return [{ keyword: 'required', message: '此项为必填项' }];
          }
          return [];
        }
      }
    }
  }
};

3. 监听表单状态：通过监听表单的校验状态来控制按钮的禁用状态

<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- 表单内容 -->
  <button type="submit" [disabled]="form.invalid">提交</button>
</form>

最佳实践建议

1. 对于必填的数组字段，始终显式初始化
2. 在复杂表单场景下，考虑结合多种校验方式
3. 对于关键业务表单，建议添加额外的客户端校验逻辑
4. 定期关注ng-alain的版本更新，该问题可能在后续版本中得到官方修复

总结

ng-alain动态表单的数组类型校验问题是一个典型的框架使用边界案例，理解其背后的校验机制有助于开发者构建更健壮的表单系统。通过合理的初始化和多重校验策略，可以确保表单在各种边界条件下都能表现出符合预期的行为。