单击取消按钮时如何消除错误

Question

I have a form inside which i am showing edit,save and cancel button logically, so initially edit button is visible and all inputs are disabled, and when I click on edit I am making my save and cancel button visible and edit not visible.

So after filling some data when user click on save I am checking the validation like required fields, so if error then user can see.

After then on click of edit if user do not want to save then I am filling the data in site for to the initial values, but if there is error on click of save and I am clicking cancel still the error is there it is not going away,

What I am doing wrong

I think on click when i am filling my formdata to initial value.

if above point is correct then why error is still visible

my code

import React, { useState, useEffect } from "react";
import "./styles.css";
import { useForm } from "react-hook-form";

// mock for useQuery
const useQuery = query => {
  const [loading, setIsLoading] = useState(true);
  const [data, setData] = useState({});
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
      setData({ firstname: "steve", lastname: "smith" });
    }, 1000);
  }, []);
  return { loading, data };
};

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(true);
  const [editBtn, seteditBtn] = useState(true);
  const [initialData, setinitialData] = useState({});
  const { loading, data } = useQuery("some qraphql query here"); // getting data from graphql
  const [formData, setFormData] = useState({});

  useEffect(() => {
    setFormData(data);
    setinitialData(data);
  }, [data]);

  const edit = () => {
    setdisabled(false);
    seteditBtn(false);
  };
  const cancel = () => {
    setFormData(initialData);
    setdisabled(true);
    seteditBtn(true);
  };
  const onSubmit = () => {
    console.log(formData);
     };

  const handleChange = e => {
    const name = e.target.name;
    const value = e.target.value;
    console.log(name, value);
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="container-fluid">
      <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <div>
            <button className="btn white_color_btn" type="submit">
              Save
            </button>
            <button
              className="btn white_color_btn"
              type="submit"
              onClick={cancel}
            >
              Cancel
            </button>
          </div>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="firstname"
              name="firstname"
              onChange={handleChange}
              value={formData.firstname}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="lastname"
              name="lastname"
              value={formData.lastname}
              onChange={handleChange}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>
    </div>
  );
}

To check the issue follow this points

click on edit -> empty the field -> then click save -> it will throw error -> then click cancel.

on cancel click I want error should go away

Working code codesandbox

Answer 1

A simple pattern is you set errors in state and clear the values of errors object to null or empty upon clicking cancel Button or when a valid input is typed. Here you can initialize errors and reset on cancel button's click. So you should update errors every time input value is changed or cancel button is clicked.

Answer 2

The errors are present because they're managed by useForm . The hook exposes a function reset that should fix your problem. Here is an example that leverage the function.

const { register, handleSubmit, reset, errors } = useForm();

// ...

const cancel = () => {
  setFormData(initialData);
  setdisabled(true);
  seteditBtn(true);
  reset();
};