Ant Design:使用自定义验证器验证表单字段

时间:2019-05-17 05:28:19

标签: reactjs antd ant-design-pro

我想使用notifications来推送表单反馈,而不是内联消息传递。例如

<Form.Item label="Name">
  {getFieldDecorator("name", {
    rules: [
      {
        validator(rule, value, callback) {
          if (!value) {
            callback("Enter Your Name");

            // I'd like to use this instead:
            // notification.open({
            //   message: "Enter Your Name",
            //   description:
            //     'This is the content of the notification.',
            // })
          }

          callback();
        }
      }
    ]
  })(<Name />)}
</Form.Item>;

是否可以在不进行内联消息传递的情况下验证表单字段并维护视觉反馈(例如,border-color更改之类的东西)?

2 个答案:

答案 0 :(得分:1)

您可以按照代码中的显示进行操作,并使用CSS隐藏错误消息。

display: none

答案 1 :(得分:0)

您可以使用 this.props.form.setFields

抛出自定义错误消息
this.props.form.setFields({
  user: {
    value: values.user,
    errors: [new Error('forbid ha')],
  },
});

Reference for form.setFields