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

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。它可以控制何时进行验证。希望它可以帮助你。

Answer 2

如上所述，我们只需指定触发器即可validateTrigger。在我们的例子中onSubmit应该完成这项工作。

{
   initialValue: '', 
   rules: [{message: 'Cannot leave blank', required: true},
      {max: 25, message: 'Must be less than 25', min: 20},
   ],
   validateTrigger: 'onSubmit' // or 'onBlur' , default -> 'onChange' (change as you wish)
}