ant design mapPropsToFields自动校验失效

最新推荐文章于 2023-06-27 14:38:21 发布

LYF01fang

最新推荐文章于 2023-06-27 14:38:21 发布

阅读量1.1k

点赞数

分类专栏： react 文章标签： ant design mapPropsToFields

本文链接：https://blog.youkuaiyun.com/polisa/article/details/103709660

版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细探讨了在Ant Design中使用mapPropsToFields渲染表单数据时遇到的校验规则问题，并提供了一种解决方案，通过自定义错误处理确保表单校验的准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用mapPropsToFields渲染表单数据的时候，发现表单的校验rules的校验实现了，但是控制台还是会打印出校验

<Form.Item {...formItemLayoutWithOutLabel} key={'serialNumber'}>
                {getFieldDecorator('serialNumber', {
                  initialValue: modelName === 'qsComponents'? (param.default?param.serialNumber:''):serialNumber,
                  rules: [
                    {
                      required: param.required,
                      message: '请输入手机号码',
                    },
                    {
                      max: 12,
                      message: '长度不能超过12个字符',
                    },
                    {
                      pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
                      message: '请输入正确格式的手机号码',
                    },
                  ],
                })(<Input placeholder="请输入手机号码" />)}
              </Form.Item>

  mapPropsToFields(props) {
    const param = props.componentParam;
    const {modelName} = props;
    const {serialNumber} = props.userInput;
    return {
      "serialNumber": Form.createFormField({
        "value": modelName === 'qsComponents' ? (param.default ? param.serialNumber : '') : serialNumber,
      }),
    }
  }

原因是

查阅很多资料发现，官网有一句话

所以就是错误需要你自己处理，目前我只能这样处理，虽然解决了问题，但是代码是否不优雅......

  mapPropsToFields(props) {
    const param = props.componentParam;
    const {modelName} = props;
    const {serialNumber} = props.userInput;
    const value = modelName === 'qsComponents' ? (param.default ? param.serialNumber : '') : serialNumber;
    let error = [];
    if(param.default){
      if(value){
        console.log('true',value);
        if(value.length > 11){
          let e ={
            max: 11,
            message: '长度不能超过12个字符',
          };
          error.push(e);
        }else if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(value))){
          let e = {
            pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
            message: '请输入正确格式的手机号码',
          };
          error.push(e);
        }
      }else {
        let e =  {
          required: param.required,
          message: '请输入手机号码',
        };
        error.push(e);
      }
    }

    return {
      "serialNumber": Form.createFormField({
        "value": modelName === 'qsComponents' ? (param.default ? param.serialNumber : '') : serialNumber,
        "name": "serialNumber",
        "touched": true,
        "dirty": false,
        "errors": error.length>0?error:null,
        "validating": false
      }),
    }
  }

注意errors是个数组，需要传数组，而且所有的参数都必须传，不然不生效