score:1

Accepted answer

you need to use the <controller /> component, as register isn't working with external controlled components like your <input /> component. check this section in the docs for more information.

you can also omit usestate here and let rhf handle the state changes for you.

const app = () => {
  const {
    control,
    handlesubmit,
    formstate: { errors }
  } = useform({
    defaultvalues: { email: "", password: "" }
  });

  const submitform = (data) => {
    console.log(data);
  };

  return (
    <div classname="row">
      <div classname="col-sm-12">
        <form onsubmit={handlesubmit(submitform)}>
          <formgroup classname="has-wrapper">
            <controller
              name="email"
              control={control}
              defaultvalue=""
              rules={{ required: true }}
              render={({ field: { ref, onchange, ...field } }) => (
                <input
                  {...field}
                  type="email"
                  id="email"
                  innerref={ref}
                  onchange={({ target: { value } }) => onchange(value)}
                  classname="has-input input-lg"
                  placeholder="enter email address"
                  aria-invalid={!!errors.email}
                />
              )}
            />
            <span classname="has-icon">
              <i classname="ti-email"></i>
            </span>
            {errors.email && (
              <span style={{ color: "red" }} role="alert">
                required
              </span>
            )}
          </formgroup>
          <input type="submit" />
        </form>
      </div>
    </div>
  );
};

edit competent-brown-t1bk3


Related Query

More Query from same tag