Quill editor fails to pass react's antd design form validation

Question

I am using antd design for my react application. I have a form like this:-

<Form {...layout} form={form} name={formTitle(window.location.pathname)} onFinish={submitForm} labelCol={{ span: 4 }} wrapperCol={{ span:8 }} labelAlign='left'>
    <Form.Item name="name" label="Name" rules={NAME_VALIDATION}>
        <Input value={name} onChange={({ target: { value, } }) => setName(value)}/>
    </Form.Item>
    <Form.Item name="description" label="Description" rules={LOCATION_PARKING_DESCRIPTION_VALIDATION}>
        <TextArea rows={4} maxLength={10000} value={description} onChange={({ target: { value, } }) => setDescription(value)}/>
    </Form.Item>
    ...............
    ...............
</Form>

The submitForm function receives the data like this:-

const submitForm = async () => {
   const submitName            = form.getFieldValue('name').toString(); 
   const submitDescription     = form.getFieldValue('description').toString();
   const submitAddress         = form.getFieldValue('address').toString();
      
   const locationData = {
       name                    : submitName,
       description             : submitDescription,
       address                 : location.address || "Test Address"
   };
   sendData(locationData)
}

Now I want to use Html Editor in place of Textarea. So I used Quill Editor like this:-

This is my HtmlEditor.js file:-

import { useState } from  "react";
import  ReactQuill  from  "react-quill";
import  "react-quill/dist/quill.snow.css";
import {connect} from 'react-redux';

function HtmlEditor({}){
    const  modules  = {
        toolbar: [
            [{ font: [] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            ["bold", "italic", "underline", "strike"],
            [{ color: [] }, { background: [] }],
            [{ script:  "sub" }, { script:  "super" }],
            ["blockquote", "code-block"],
            [{ list:  "ordered" }, { list:  "bullet" }],
            [{ indent:  "-1" }, { indent:  "+1" }, { align: [] }],
            ["link", "image", "video"],
            ["clean"],
        ],
    };

    const formats = [
                        'header',
                        'bold',
                        'italic',
                        'underline',
                        'strike',
                        'blockquote',
                        'list',
                        'bullet',
                        'indent',
                        'link',
                        'code',
                    ];

    const [value, setValue] =  useState("");
    console.log(value);

    return  <ReactQuill formats={formats} modules={modules} theme="snow" onChange={setValue} placeholder="Content goes here..." />;
}

const mapState = state =>({

});
const mapDispatch = dispatch =>({

})

export default connect(mapState, mapDispatch)(HtmlEditor);

I then imported the HtmlEditor into my form page like this:

import HtmlEditor from "../../components/Element/HtmlEditor

..................................................

<Form {...layout} form={form} name={formTitle(window.location.pathname)} onFinish={submitForm} labelCol={{ span: 4 }} wrapperCol={{ span:8 }} labelAlign='left'>
    <Form.Item name="name" label="Name" rules={NAME_VALIDATION}>
        <Input value={name} onChange={({ target: { value, } }) => setName(value)}/>
    </Form.Item>
    <Form.Item name="description" label="Description" rules={LOCATION_PARKING_DESCRIPTION_VALIDATION}>
        <HtmlEditor/>
    </Form.Item>
    ...............
    ...............
</Form>

However, when I am trying to submit the form even after writing something in the HtmlEditor, the validation rule throws an error message. It seems like whatever I write in HtmlEditor, it is simply being discarded or ignored.

How can I fix this?

Answer 1

You need to add value and onChange as props to your HtmlEditor component like:

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

function HtmlEditor({ value, onChange }) {
  const modules = {
    toolbar: [
      [{ font: [] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ["bold", "italic", "underline", "strike"],
      [{ color: [] }, { background: [] }],
      [{ script: "sub" }, { script: "super" }],
      ["blockquote", "code-block"],
      [{ list: "ordered" }, { list: "bullet" }],
      [{ indent: "-1" }, { indent: "+1" }, { align: [] }],
      ["link", "image", "video"],
      ["clean"]
    ]
  };

  const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "code"
  ];

  const handleOnChange = (newVal) => {
    if (newVal.replace(/<(.|\n)*?>/g, "").trim().length === 0) {
      newVal = ""; // that's for handling empty tags
    }
    onChange(newVal);
  };

  return (
    <ReactQuill
      value={value}
      formats={formats}
      modules={modules}
      theme="snow"
      onChange={handleOnChange}
      placeholder="Content goes here..."
    />
  );
}

export default HtmlEditor;

By this way, the value of the HtmlEditor can be controlled by antd Form.

You can take a look at this sandbox for a live working example.