Другое сообщение проверки запускается вместо моего сообщения при использовании Ant design getFieldDecorator

Question

Я использую Ant design, и это моя форма, когда я нажимаю "Сохранить". Я получаю этот тип сообщения MSG вместо красной проверки MSD

Я хочу такую ​​ошибку валидации, которая показана в документах AntD. https://codesandbox.io/s/do52z

У меня есть моя функция писателя

      <Form  id="myForm" onSubmit={this.handleSubmit}>
          <Form.Item label="Code">
                      <CustomInput
                        form={this.props.form}
                        type="text"
                        disabled={this.state.disableFields}
                        name="code"
                        id="code"
                        placeholder=""
                        required={true}
                        errorMsg={"Please input code!"}
                      />
        </Form.Item>
   </Form>

Это мой заказ Введите

const CustomInput = ({
  form, id, name, placeholder, required, errorMsg, type, disabled,}: Props) => {
  return form.getFieldDecorator(id, {
    rules: [
      {
        required: required,
        message: errorMsg
      }
    ]
  })(
    <Input
      type={type}
      name={name}
      id={id}
      disabled={disabled}
      placeholder={placeholder}
      className={name === "code" ? "code-input" : "input-box"}
    />
  );
};

export default CustomInput;

и это моя кнопка сохранения

             <Button
                className="save-btn"
                htmlType="submit"
                form="myForm"
              >
                Save
              </Button>

Я думаю, что мне здесь чего-то не хватает. Заранее спасибо

Answer 1

Вход для дизайна Ant не требует обязательной поддержки. Необходимая поддержка должна быть задана внутри form.item. Правило поддержки.

Поскольку вы указали требование для тега ввода, это вызовет Chrome, чтобы отобразить подсказку. чтобы пользователь заполнил поле.

Обновление на основе комментария

Переместите тег formitem внутрь компонента custominput и повторите попытку.

  <Form  id="myForm" onSubmit={this.handleSubmit}>

                      <CustomInput
                        form={this.props.form}
                        type="text"
                        disabled={this.state.disableFields}
                        name="code"
                        id="code"
                        placeholder=""
                        required={true}
                        errorMsg={"Please input code!"}
                      />
   </Form>

..

const CustomInput = ({
  form, id, name, placeholder, required, errorMsg, type, disabled,}: Props) => {
  return(
   <Form.Item label="Code">
{form.getFieldDecorator(id, {
    rules: [
      {
        required: required,
        message: errorMsg
      }
    ]
  })(
    <Input
      type={type}
      name={name}
      id={id}
      disabled={disabled}
      placeholder={placeholder}
      className={name === "code" ? "code-input" : "input-box"}
    />
  )}

</Form.Item>
) 
};