Question

我已经使用Ant Design和Reactjs创建了一个表单。它工作得很好，除了它显示了我甚至在单击“提交”按钮并输入用户之前为输入字段下的每个字段指定的错误消息。它看起来很奇怪，我想更改该行为。我只想单击提交按钮后才显示这些消息。有办法吗？

我查看了官方文件。我找不到关于“异步验证器”或“ getFieldDecorator”的任何建议的内容。

通过以下方式设置用于指定每个字段的验证规则和错误消息的“ getFieldDecorator”：

<Form.Item label="Title" style={{ margin: 0 }}>
  {getFieldDecorator('Title', {
    rules: [{ required: true, message: 'Please input the title', whitespace: true }], initialValue: title
  })(<Input onChange={this.onTitleChange.bind(this)} value={title} />)}
</Form.Item>

我的“ OnSubmit（）”方法如下：

handleSubmit = () => {
  this.props.form.validateFields((err, values) => {
    if (err) {
      return;
    }
    this.handleSaveBanner();
  });
};

期望的是仅在单击“提交”按钮之后显示错误消息，即使用户键入无效的输入或将其留空也不会在此之前显示错误消息。由于我是React的新手，我们将不胜感激。

Answer 1

请仔细阅读。 https://ant.design/components/form/#getFieldDecorator(id,-options)-parameters。有一个名为validateTrigger的选项。它可以控制何时进行验证。希望它可以帮助您。

如何仅在提交表单后而不在用户输入antd时显示错误或验证消息？

1 个答案: