antd v4表单迁移后自定义校验器validator获取不到value值如何解决

问题原因及解决步骤 #

你遇到的validatePassword中val为undefined的问题，在antd v4表单迁移中属于常见问题，核心原因和对应修复方案如下：

1. 优先检查自定义FormWrapper的属性透传

你封装的FormWrapper如果没有把所有接收的属性透传给内部的antd原生Form组件，会导致表单的字段值收集逻辑完全失效，是val为undefined的最常见诱因。
请确保你的FormWrapper写法类似如下示例：

// FormWrapper 正确实现参考
import { Form } from 'antd';
import styled from 'styled-components';

const StyledFormContainer = styled.div`
  // 你的自定义样式代码
`;

const FormWrapper = (props) => {
  const { children, ...formProps } = props;
  return (
    <StyledFormContainer>
      {/* 必须将所有表单属性透传给antd原生Form组件 */}
      <Form {...formProps}>
        {children}
      </Form>
    </StyledFormContainer>
  );
};

export default FormWrapper;

2. 修正类组件中Form实例的获取方式

antd v4已经废弃了v3的Form.create()API，你代码中this.props.form的用法在v4中默认不会生效，需要通过ref获取Form实例：

• 第一步在类组件中创建Form的ref引用：

import { FormInstance } from 'antd/es/form';

class SignUpContainer extends React.Component<Props, State> {
  // 新增Form实例ref
  formRef = React.createRef<FormInstance>();
  // 其他原有代码
}

• 第二步给FormWrapper绑定ref：

<FormWrapper 
  ref={this.formRef}
  onFinish={this.handleSubmit}
>
  {/* 原有表单项代码 */}
</FormWrapper>

• 第三步替换原有this.props.form的调用逻辑：
  原代码中form.validateFields(['confirm'], { force: true })替换为：

this.formRef.current?.validateFields(['confirm'], { force: true });

3. 兼容校验函数的空值场景，优化写法

antd v4的自定义校验规则优先推荐返回Promise的写法，比传统callback写法更易维护，也能避免回调漏调用的问题，修改后的校验函数如下：

validatePassword = async (rule: any, val: string) => {
  console.log(val);
  // 空值场景直接返回，上层required规则已经会处理空值提示
  if (!val) return;

  const validationRulesErrors = schema.validate(val, { list: true });
  if (val && this.state.confirmDirty) {
    this.formRef.current?.validateFields(['confirm'], { force: true });
  }
  if (validationRulesErrors.length > 0) {
    throw new Error(this.formatPasswordValidateError(validationRulesErrors));
  }
};

如果你要保留原有的callback写法，需要提前做空值判断，避免把undefined传给password-validator的校验逻辑：

validatePassword = (rule: object, val: string, callback: (message?: string) => void) => {
  console.log(val);
  // 提前处理空值
  if (!val) {
    callback();
    return;
  }

  const validationRulesErrors = schema.validate(val, { list: true });
  if (val && this.state.confirmDirty) {
    this.formRef.current?.validateFields(['confirm'], { force: true });
  }
  if (validationRulesErrors.length > 0) {
    callback(this.formatPasswordValidateError(validationRulesErrors));
    return;
  }
  callback();
};

可选补充：设置表单初始值

如果需要从根源避免val为undefined的情况，可以给Form配置initialValues属性，为对应字段设置初始空字符串：

<FormWrapper 
  ref={this.formRef}
  initialValues={{ password: '', confirm: '' }}
  onFinish={this.handleSubmit}
>

内容的提问来源于stack exchange，提问作者TrivialCase