Register not work with antd design inputs

[Haqverdi]

Describe the bug Register function not working with antd design inputs, i tried all ways with ref, but not working.

[bluebill1049]

you have a codesandbox? i may add an example to the website soon with antd

[Haqverdi]

Yes, link https://codesandbox.io/s/zen-dan-6zmyw I just wanted to clarify one point, auto registration and validation does not work, you can only do with manual methods, for example: ` const { register, watch, setValue } = useForm();

const watchAll = watch();

console.log(watchAll);

// only working variant const onChange = e => setValue("form3", e.target.value);

React.useEffect(() => { register({ name: "form3" }); }, [register]);`

[Haqverdi]

[bluebill1049]

thanks, i am looking at it now

[bluebill1049]

https://codesandbox.io/s/black-grass-yh9ph

looks like watch is not working with antd, I will raise a bug there see what's the reason for that.

[Haqverdi]

https://codesandbox.io/s/black-grass-yh9ph

looks like watch is not working with antd, I will raise a bug there see what's the reason for that.

i will check, thanks for great library

[bluebill1049]

i have raised an issue there: https://github.com/ant-design/ant-design/issues/18411

[Haqverdi]

thanks for reply

[bluebill1049]

by the way, i found a workaround for now: https://codesandbox.io/s/elastic-ptolemy-cr5xz

when you using watch in antd, you always need to set a value

[Haqverdi]

i am tried it before, but in form edit mode it is problematic to set initial values and handle errors problematic too, when setValue error not cleared automatic from one of components:

    register,
    errors,
    handleSubmit,
    setValue,
    clearError,
    watch,
  } = useForm();

  const structureWatch = watch('structure');
  const personInChargeWatch = watch('personInCharge');

  function handleFormSubmit(values) {
    createStock({
      ...values,
      lat: values.lat ? Number(values.lat).toFixed(2) : '',
      lng: values.lng ? Number(values.lng).toFixed(2) : '',
      area: values.area || '',
    });
  }
  // register inputs
  useLayoutEffect(() => {
    register({ name: 'name' }, { required: 'Bu dəyər boş olmamalıdır.' });
    register({ name: 'stockType' }, { required: 'Bu dəyər boş olmamalıdır.' });
    register({ name: 'structure' }, { required: 'Bu dəyər boş olmamalıdır.' });
    register(
      { name: 'personInCharge' },
      { required: 'Bu dəyər boş olmamalıdır.' }
    );
    register({ name: 'lat' });
    register({ name: 'lng' });
    register({ name: 'area' });
  }, []);``

and for edit hook
``
function onChange(name, value) {
    setValue(name, value);
    clearError(name);
  }

  function toggleHandle() {
    if (!editable) {
      values.forEach(item => {
        const { name, value, required = true } = item;
        register({ name }, { required });
        setValue(name, value);
      });
    } else {
      values.forEach(item => {
        const { name } = item;
        unregister(name);
      });
    }
    setState(!editable);`

[bluebill1049]

try setValue(name, value, true); you can remove clearError. it should trigger validation after set value.

[Haqverdi]

additionally possible to implement the method for set complex values, example: object from api, maybe setValueS?)

[Haqverdi]

try setValue(name, value, true); you can remove clearError. it should trigger validation after set value.

i will try, thanks)

[Haqverdi]

and impossible to set initial value, on manually register?

[bluebill1049]

you can't use defaultValue on the input?

for regsitered input, you can use the hook to initialised the default value. however, you are doing custom register, so probably not the case.

const { register } = useForm({
  defaultValues: {
    firstName: "bill",
    lastName: "luo",
    email: "bluebill1049@hotmail.com",
    pets: [ 'dog', 'cat' ]
  }
})

[Haqverdi]

this case difficult to implement when using same form for add and for edit, with add no problem, but when to try set values only after they arrived from api

[bluebill1049]

agree, if you had ref registered then setValue is the right api for the job.

[bluebill1049]

have the input ref registered will make things much easier by using this library

[Haqverdi]

yes when ref available and not wait data from api this library is great, thanks for your work

[bluebill1049]

https://codesandbox.io/s/reverent-tdd-ztpd6

check out this example, the settimeout bit is like server request

[Haqverdi]

great idea, I will check, thanks a lot

[bluebill1049]

going to close this for now, unless you have other questions :)

[ilyakmet]

I really can't figure out what's going on! Where is the final solution for Ant Desig?

https://codesandbox.io/s/elastic-ptolemy-cr5xz – is 404 ERROR

[bluebill1049]

@ilyakmet have you tried use Controller

[bluebill1049]

https://react-hook-form.com/api#Controller

[ilyakmet]

@bluebill1049 OK

RHFANT4 - does't work RHFANT3 - work

Why?

[bluebill1049]

Obviously they made some breaking change @ilyakmet

so after investigation: looks like it's their

component had some breaking change

https://codesandbox.io/s/rhfant4-5fu6c?file=/src/App.js

you may want to look into that.