Ant 设计表单未验证

Question

所以我试图遵循文档，并想出了这个：

这是一个简单的例子：

import { Button, Form, Input } from "antd";

export default function App() {
  const [form] = Form.useForm();
  return (
    <Form form={form} onFinish={(data) => console.log(data)}>
      <Form.Item
        rules={[{ required: true, message: "test message" }]}
        label="test"
      >
        <Input />
      </Form.Item>
      <Button htmlType="submit">Submit</Button>
    </Form>
  );
}

连同codesandbox

Form.Item 的预期行为是在此处呈现如下红色警告：

但是没有这样的事情发生。 onFinish 表示表单数据是一个空对象，验证不会运行。所以我一定是错过了什么。知道什么吗？

Answer 1

您需要为Form.Item 组件设置name 属性。

import "./styles.css";
import { Button, Form, Input } from "antd";

export default function App() {
  const [form] = Form.useForm();
  return (
    <Form form={form} onFinish={(data) => console.log(data)}>
      <Form.Item
        rules={[{ required: true, message: "test message" }]}
        name="username"
        label="test"
      >
        <Input />
      </Form.Item>
      <Button htmlType="submit">Submit</Button>
    </Form>
  );
}

日志：

async-validator: 
(1) ["'username' is required"]