自定义表单的验证信息不再页面显示，却在控制台显示

[oNexiaoyao]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.5.1

Environment

windows10, 使用typescript,下面的链接是找的一个类似的问题

Reproduction link

#5263

Steps to reproduce

1，在modal框中嵌入Form表单，针对表单中的input的做必填项验证可以在点击modal的确认按钮触发验证
2， 但是针对Form中的某一个input做自定义验证validator时，input的输入过程中一旦校验不符合，控制台会打印出提示信息，但是页面没有显示

What is expected?

自定义校验时，不符合的信息显示在页面

What is actually happening?

不显示在页面却在控制台显示

---

1、对modal使用Form.create()包裹

const WrappedPermissionModal = Form.create()(PermissionModal);

2、自定义validator
/**

• url需要保持唯一
  */
  private validatorForURL = (rule: any, value: string, callback: any) => {
  // 获取所有的权限
  if (!value) {
  // 为空
  callback();
  return;
  }
  for (let i = 0; i < this.props.tableData.length; i ) {
  if (this.props.tableData[i].url.toLocaleLowerCase() === value.replace(/\s/g, '').toLocaleLowerCase()) {
  callback('该URL已存在，请保持唯一');
  } else {
  callback();
  }
  }
  callback();
  }

[ant-design-bot]

Translation of this issue:

---

Custom form verification information is no longer displayed on the page but is displayed on the console

• [] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.5.1

Environment

Windows10, using typescript, the following link is a similar question to look for

Reproduction link

[https://github.com//issues/5263] (#5263)

Steps to reproduce

1, in the modal box embedded Form form, for the form of input required to verify the fill can click on the modal confirmation button to trigger verification
2, but for a specific input in the Form to do a validator validation, input validation process once the input does not meet, the console will print a prompt message, but the page is not displayed

What is expected?

Non-conforming information is displayed on the page when customizing the verification

What is actually happening?

Not displayed in the page but displayed in the console

---

1, the use of Form.create () package modal

Const WrappedPermissionModal = Form.create()(PermissionModal);

2, custom validator
/**
   * url needs to be unique
   */
  Private validatorForURL = (rule: any, value: string, callback: any) => {
    // Get all permissions
    If (!value) {
      // Is empty
      Callback();
      Return;
    }
    For (let i = 0; i < this.props.tableData.length; i ) {
      If (this.props.tableData[i].url.toLocaleLowerCase() === value.replace(/\s/g, '').toLocaleLowerCase()) {
        Callback('This URL already exists, please keep it unique');
      } Else {
        Callback();
      }
    }
    Callback();
  }

[ant-design-bot]

Hello @oNexiaoyao. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.

[ktfj]

请教一下，这个问题是如何解决的？ 在modal框中嵌入Form表单，对form做必填项验证。验证信息打印在控制台，没有显示。

[Liuqing650]

这个问题我也遇到了，请问有解决方案吗?自定义校验在控制台显示而不是在表单下面显示

[zhaoo-jing]

碰到同样的问题了，请问大家怎么解决的？

[dengfuping]

应该是使用姿势的问题，可以参考 The demo of Modal with Form 对照下自己的写法。

[Liuqing650]

// 这样应该就可以了
validator: (rule, value, callback) => {
  if (value && value !== 'abc') {
    rule.message = '输入的不是abc';
    callback(true);
  }
  callback();
}

[ms20hj]

validateName = async(rule, value, callback) => {
try {
if (value) {
const { dispatch, tempRole } = this.props;
const param = {
roleName: value,
};
if (tempRole.id) {
param.id = tempRole.id;
}
return dispatch({
type: 'role/checkNameExist',
payload: {
...param,
},
}).then(() => {
const { handleResult } = this.props;
if (handleResult.data) {
return Promise.reject(new Error('角色名已存在'));
} else {
return Promise.resolve();
}
});
}
return Promise.resolve();
} catch (e) {
return Promise.reject(e);
}
};

异步这样子就可以了