react-hook-form reset is not working with Controller + antd

Question

I'm trying to use react-hook-form together with the antd <Input /> component

I'm not getting reset to work with <Controller />

Here is my code:

const  NormalLoginForm = () =>{
  const {reset, handleSubmit, control} = useForm();

  const onSubmit = handleSubmit(async ({username, password}) => {
        console.log(username, password);
        reset();
  });

    return (
      <form onSubmit={onSubmit} className="login-form">
        <Form.Item>
                        <Controller as={<Input
                            prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            autoFocus={true}
                            placeholder="Benutzername"

                        />} name={'username'} control={control}/>

                    </Form.Item>
                    <Form.Item>
                        <Controller as={<Input
                            prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            type="password"
                            placeholder="Passwort"

                        />} name={'password'} control={control}/>
                    </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </form>
    );
}

I'm expecting that the two input fields are getting cleared when the form is submitted. But that doesn't work.

Am I missing something here?

Example on Stackblitz https://stackblitz.com/edit/react-y94jpf?file=index.js

Edit:

The RHFInput mentioned here React Hook Form with AntD Styling is now part of react-hook-form and has been renamed to Controller. I'm already using it.

I've figured out that chaning

reset();

to

reset({
  username:'',
  password:''
});

solves the problem.

However - I wanted to reset the whole form without explicitly assigning new values.

Edit 2:

Bill has pointed out in the comments that it's almost impossible to detect the default values for external controlled inputs. Therefore we're forced to pass the default values to the reset method. That makes totally sense to me.

Vaporous

Does this answer your question? React Hook Form with AntD Styling – Gyromagnetic

here is solution for your question https://mcmap.net/q/535303/-react-hook-form-with-antd-styling check this out – Gyromagnetic

That solves my problem just partial. As the repository mentioned stands out, the RHFInput has been integrated into react-hook-form as Controller. I'm already using it. – Vaporous

hey there, as right now we are forcing you to reset entire form values due to the nature of uncontrolled, because RHF doesn't required you to set up default values, it's almost impossible to detect default values for all your external controlled inputs. – Gnarly

in my case reset() will left one character on each input specifying each input and make them empty solved my problem thanks man.. – Unto

Answer 1

You must wrapper the components for antd and create a render component, it is very similar if you use Material UI, So the code can be like:

import { Input, Button } from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import {useForm, Controller} from 'react-hook-form';

const RenderInput = ({
  field: {
    onChange,
    value
  },
  prefix,
  autoFocus,
  placeholder
}) => {

  return (
    <Input
      prefix={prefix}
      autoFocus={autoFocus}
      placeholder={placeholder}
      onChange={onChange}
      value={value}
    />
  );
}

export const  NormalLoginForm = () =>{
  const {reset, handleSubmit, control} = useForm();

  const onSubmit = ({username, password}) => {
        console.log(username, password);
        reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="login-form">
      <Controller
        control={control}
        name={'username'}
        defaultValue=""
        render={ ({field}) => (
          <RenderInput
            field={field}
            autoFocus={true}
            placeholder="Benutzername"
          />
          )}
      />
      <Controller
        render={ ({field}) => (
          <RenderInput
            field={field}
            type="password"
            placeholder="Passwort"
          />
          )}
        defaultValue=""      
        name={'password'}
        control={control}
      />
      <Button
        type="primary"
        htmlType="submit"
        className="login-form-button"
      >
        Log in
      </Button>
    </form>
  );
}

export default NormalLoginForm;

You can notice that I did't put the Icon ,it was because I tested using the version 4 for antd and something change in how to use the icons.

Conductive

Answer 2

I will just explain my findings here, we must set defaultValue in order for reset to work, and also to get get correct isdirty value or to reset isDirty value when value reset to default. To set defaultValue, we have options to set defaultValue with useForm or use reset or resetField inside useEffect hook. Note- setValue will not set default value.

Navarro

Answer 3

I've just resolved this challenge by using resetFields() of ant-design Form which is used to implement the form. and use reset() of react-hook-form for reset form variables as well.

import {Button, Form, Input, Select} from "antd";
import {Controller, SubmitHandler, useForm} from "react-hook-form";

const YourComponent = () => {
  ...
  const [form] = Form.useForm();
  const { reset } = useForm();
  const onSubmit: SubmitHandler = async (data: UserRequest) => {
    ...
    form.resetFields();
    reset();
    ...
  }
  return (<Form onFinish={handleSubmit(onSubmit)} form={form} >...</Form>);
}

Largo