如何对 antd Text (typography) 组件进行验证？

Question

It seems that we couldn't add validation for antd editable <Text> (typography). The component doesn't accept value props like <Input> component. How do we do validation in that case?

Code:

const [title, setTitle] = useState("Battle");
<>
  <Form id="myForm" name="basic" onFinish={onSubmit}>
    <Form.Item
      name="title"
      rules={[
        {
          required: true,
          message: "Please input your title!"
        }
      ]}
    >
      <Text editable>{title}</Text>
    </Form.Item>
  </Form>

  <Button form="myForm" key="formSubmit" htmlType="submit" type="primary">
    Create
  </Button>
</>

Above code validation works but if the data is still there, it show validation error.

Codesandbox link: https://codesandbox.io/s/basic-antd-4-16-9-forked-o8nxdl?file=/index.js

Answer 1

Here is a code that does some simple validations

function reducer (action , state) {
  switch (action.type){
    case 'title': 
       return {...state , data : { ...state.data , title : action.payload } 
              , errors : {  ...state.errors 
          , title : title.length > 3 null : '😈'} } // title length must be > 3
  }
}

const [state , dispatch] = useReducer (reducer , {data : {} , errors : {})

console.log (state)

return ( <> <Form.Item
  name="title"
  rules={[
    {
      required: true,
      message: "Please input your title!"
    }
  ]}
  onChange = {(e) => dispatch ({type : 'title' , payload : e.target.value})
>
  <Text editable>{title}</Text>
</Form.Item> </>)

Before submitting make sure all errors must be null

Answer 2

you can handle it using the onChange like this working demo is here

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Button, Input, Typography } from "antd";
import SecForm from "./SecForm";
const { Text } = Typography;

const App = () => {
  const [title, setTitle] = useState('Battle');
  const data = ["1", "2", "3"];

  const onHandleChange = (event) => {
    setTitle(event);
  };
  const onSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted");
  };

  return (
    <>
      <Form id="myForm" name="basic" onFinish={onSubmit}>
        <Form.Item
          label="name"
          name="name"
          rules={[
            {
              required: true,
              message: "Please input your name!"
            }
          ]}
        >
          <Input placeholder="Name" />
        </Form.Item>

        <Form.Item
          label="rank"
          name="rank"
          rules={[
            {
              required: true,
              message: "Please input your rank!"
            }
          ]}
        >
          <Input placeholder="Rank" />
        </Form.Item>

        <Form.Item
          name="title"
          valuePropName={title}
          rules={[
            {
              required: title?.length < 1,
              message: "Please input your title!"
            }
          ]}
        >
          <Text editable={{ onChange: onHandleChange }}>{title}</Text>
        </Form.Item>
        {data.map((d, index) => (
          <SecForm index={index} />
        ))}
      </Form>

      <Button form="myForm" key="formSubmit" htmlType="submit" type="primary">
        Create
      </Button>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));