benmagyar / form-hooks Goto Github PK

If you set initialValues from props and props update the values don't update.

I have made this example to demonstrate the bug:
https://codesandbox.io/s/16p2053qq

The solution I think after checking the code will be to add this:

  useEffect(() => {
    setValues(initialValues);
  }, [initialValues]);

so if the initial values change the values should change to.

It would be great if useForm could handle <input type="file" /> a bit better. Right now when a file is selected the only thing we get is a fake path to this file instead of a FileList object.

One simple change that would allow is to add another condition inside the value function:

  function value (event) {
    // normalize values as Formik would
    // https://github.com/jaredpalmer/formik/blob/348f44a3016113d6e2b70db714739804ad0ed4c4/src/Formik.tsx#L321
-   const { checked, type, value } = event.target
+   const { checked, type, value, files } = event.target
    if (/number|range/.test(type)) {
      const parsed = parseFloat(value)
      return isNaN(parsed) ? '' : parsed
    } else if (/checkbox/.test(type)) {
      return checked
+   } else if (/file/.test(type)) {
+     return files
    }
    return value
  }

Similarly to #11 it would be really useful to also have a resetValue(name) function that would reset a field to a value from initialValues.

EDIT: It could also take a second argument touched to inform the internal logic whether the field should be left or not as touched.

@BenMagyar would you consider extending values that both validateOnBlur and validateOnChange can take, so that we can decide whether we want them to be triggered even when this condition is not meet:

Only fired when all fields have been touched that were in the initialValues object.

What I would suggest is to leave true and false as they are currently to avoid introducing a breaking change, but also add ability to pass a function like so:

useForm({
  validateOnChange: (name) => doSomething(name),
  validateOnBlur: (name) => doSomethingElse(name),
});

This way we would have a lot more possibilities when deciding whether some fields should be validated when onChange and/or onBlur are triggered. The function could be executed with the field name as an argument and validation would be triggered when the function returns true.

The function would also allow to always trigger the validation, even if not all initialValues fields are touched:

useForm({
  validateOnChange: () => true,
  validateOnBlur: () => true,
});

What do you think?

I am trying to use your component in my CRA web app. But I immediatly get this:

TypeError: (0 , _react.useState) is not a function
useForm
C:/Users/Bruce/Dropbox/Projects/AcesTrader/node_modules/form-hooks/lib/index.js:117
114 | _ref$validateOnChange = _ref.validateOnChange,
115 | validateOnChange = _ref$validateOnChange === void 0 ? true : _ref$validateOnChange;
116 |

117 | var _useState = (0, _react.useState)({}),
| ^ 118 | _useState2 = _slicedToArray(_useState, 2),
119 | errors = _useState2[0],
120 | setErrors = _useState2[1];
View compiled
DialogForm
C:/Users/Bruce/Dropbox/Projects/AcesTrader/src/components/Charts/ChartDashboard/DialogForm.js:6
3 | import React from 'react'
4 | import { useForm } from 'form-hooks'
5 |
6 | const DialogForm = () => {
7 | const { errors, touched, values, handleBlur, handleChange, handleSubmit, isSubmitting } = useForm({
8 | initialValues: {
9 | name: 'Bruce',
View compiled
▶ 17 stack frames were collapsed.

My package.json includes these in "dependencies":
"react": "16.7.0-alpha.0",
"react-dom": "16.7.0-alpha.0",

I guess it's too early to try this experimental feature.
[email protected]

Currently the only way to set a field value is to pass handleChange to each fields' onChange event callback. It would be great if useForm would return along with handleChange and the rest something like setValue which would take a field name and value:

const { setValue } = useForm({ ... })
setValue('someField', 'test')

This could be really helpful for example when you would need to reset a single field and not a whole form.

EDIT: It could also take a third argument touched to inform the internal logic whether the field should be set or not as touched.

Add the ability to reset form back to initial values.

Because API doesn't export setValues I can't manually get them back to inital values.

First idea was to use handleChange for each value, but that function expects event, not string, so I can't just call handleChange('someValue') for each input to reset them back. What I have to do is I have to pass mocked event object with target.name to make this work, which I feel is a hack.

Another (hacky) way to reset form would be to pass initial values as props and then reset them back to initial when I need to. Problem is that I have to define them in parent component and create that component just to make this work (which I wouldn't need usually).

I think this should be easy, just call this inside resetForm:

setErrors({});
setValues(initialValues);
setTouched({});
setIsSubmitting(false);
setSubmitCount(0);

Same as you're doing in effect function.

On a side note, I think it would be nice to export all set methods (setValues, setTouched...) so you'll allow customization of values programmatically when needed.