jannikbuschke / formik-antd Goto Github PK

Here is my config-overrides.js:

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      hack: `true; @import "${path.resolve(__dirname, './src/theme.less')}";` // Override with less file
    }
  }),
  fixBabelImports('antd', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true
  }),
  fixBabelImports('formik-antd', {
    libraryName: '@jbuschke/formik-antd',
    style: true,
    libraryDirectory: 'es'
  })
);

Everything is working great with yarn start, but I'm missing styles for formik-antd components when creating a production build (yarn build).

Just saw this comment, which looks like they're having the same issue: #63 (comment)

The next comment in that thread (@edongashi) has suggestions which did not fix the problem.

@thj-dk is your build script in package.json set to "build": "react-app-rewired build"?

Also try setting style: 'css' in fixBabelImports to see if it makes any difference.

           My code:           
                      <Select
                        defaultValue="Sunday"
                      >
                        <Select.Option value="Sunday">Sunday</Select.Option>
                        <Select.Option value="Monday">Monday</Select.Option>
                        <Select.Option value="Tuesday" >Tuesday</Select.Option>
                        <Select.Option value="Wednesday">Wednesday</Select.Option>
                      </Select>

Error:
Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
in div (created by Select)
in div (created by Select)
in div (created by Select)
in div (created by Select)

const SignupSchema = Yup.object().shape({
    realname: Yup.string().trim().required('realname'),
});

<FormItem name={"realname"} label={'realname'} required>
    <Input name="realname" />
</FormItem>

I hope for auto add required for FormItem

To allow custom onChange while still internally updating Formik state, prop onChange should not overwrite existing onChange. Instead, existing (internal) onChange should check if the user onChange is passed as a prop and execute it if so.

So instead of

...
onChange={v => {
  setFieldValue(name, v.target.checked)
  setFieldTouched(name, true)
}}
{...restProps}
...

something like this

...
{...restProps}
onChange={v => {
  setFieldValue(name, v.target.checked)
  setFieldTouched(name, true)
  restProps.onChange && restProps.onChange(v)
}}
...

Originally posted by @iamvanja in #56 (comment)

I have a multi form where you can pick up where you left while filling them out, so at times the initial values I pass to the Form is the values grabbed from the server, The submit button is disabled and doesn't let me submit even when the schema validation is passing, It only let's me when the value of the fields is different from the initial values.

When using the DatePicker through formik it isn't formatted correctly and also when clicked the datepicker doesn't appear.

With formik-antd

Standard antd

I just spent a couple hours tonight trying to figure out why my import on demand per Ant's docs was not working. Turns out that it was a couple imports from formik-antd.

I wonder if it's possible for formik-antd to import similarly, e.g. instead of import { Form } from 'antd' you would do import Form from 'antd/lib/form' or import Form from 'antd/es/form'.

Thanks in advance!

I'm current working on a form that uses both inline and form-wide validation.
I'm trying to cover all cases of someone using the form and trying to pass validation.

One scenario being, someone who doesn't fill out the form of required fields, and just presses submit and/or triggers the validateForm() function.

Using the current state of the FormItem component, even though Formik is legitimately passing proper errors, because the FormItem is checking for isTouched, it won't actually display any of the errors. So the user actually doesn't know why he can't submit (even though there are errors)

This needs to be fixed asap imo

In order to make migrations easier and to make the component names simpler, the Field suffix should be dropped.
It's likely that in a specific files (maybe even in a codebase) only exclusively formik-antd or antd components will be used, so the readability/comprehensibility should be granted.

package.json shows 0.9.0

npm shows 0.10.0

https://ant.design/components/typography/

If I have a Radio.Group on my form, whenever I change the value of the radio it creates a "undefined" attribute in the values object. Part of the behaviour is correct, it changes the value of the category to whichever value I have selected at the time, but also creates a new attribute called "undefined". I have to manually remove to the key from the object to correctly submit the form.

I even created a sandbox to demonstrate the issue: https://codesandbox.io/s/angry-shockley-f513c

Please add source files to node_modules package, when publishing the package to npm. Because they are not published, I'm unable to inspect the non-compiled source of the package from my editor and my build is throwing warnings because source map files are referring to source files which are not there.

This is the current file stucture:

Otherwise, nice lib, I'm having a pleasant time using it so far.

If anyone by change reads this, can you report if version 1.3 works or has any problems that have not been present in 1.2?

The underlying way of exporting components changed, but there shouldnt be any breaking changes.

Any feedback is appreciated (also just "works")

Seem as though you aren't removing validate from the props that you're extending to <Input />.

A simple spread destructure on props should fix this.
It also seems that this applies to the rest of the components as well.

I can make a PR for this tomorrow.
It will follow the same prop destructuring method I used in #7

I would like to use this project next.js but fails at importing components when rendering from server-side. Would there be no problems to change the module target from esnext to commonjs?

Some components export additional helpers that are not necessarily components that update state. I.e. https://ant.design/components/input/#Input.Group is a helper to group inputs. This component is part of the Inputs static API, to make migrating to formik-antd I think the formik-antd Input should also statically export the (original) Antd Input.Group.

TODO:

• Add Select.Option
• Add TreeSelect.TreeNode

MY code: <DatePicker mode="year" name="eventYear" placeholder="Event year" />

Year can`t be selected

Hi there - thanks for the work on formik-antd!

I'm running into a slight snag - how might I utilize the validate prop on an <Input /> component - all while utilizing a <Form.Item> to wrap it?

I would like to provide a label for a field and perform field-level validation on it, but it looks like if the name property on Form.Item and Input are identical, any errors do not make it up into the Formik state (as shown by the debugger component).

I've provided an example here:
https://codesandbox.io/s/formikantd-j4b4m?fontsize=14

Currently I am not yet 100% happy with the FormItem component, as

• providing the name prop is duplicated (FormItem and the Input control need it)
• creates nesting
• the default css has a big margin-bottom value (antd issue)
• FormItem seems to be a little bit overloaded (i.e.g with layout stuff and rendering a label https://ant.design/components/form/, also the ant design samples here look overly complex)
• I think that either all input components are wrapped in a FormItem or not. If all are wrapped, this seems to be just boilerplate, and it would be nice to have a simple mechanism to enable/disable validation/FormItem-Wrapping

Select don't support Select.Option!
I find "Select.renderOptions" in Select.tsx,
But not everybody know this. Because in ant design, we use <Select.Option>

My code:

import {Select} from "@jbuschke/formik-antd";

<Select name='sex'>
 {
  Select.renderOptions([{label:'male', value:'M'}])
 }
</Select>

Checkbox.Group with options as array of objects throws
TypeError
state.value.indexOf is not a function

https://codesandbox.io/s/inspiring-herschel-0s72m

Checkboxes nested into a group throw
TypeError
checkboxGroup.value.indexOf is not a function

https://codesandbox.io/s/naughty-proskuriakova-pu22z

I'm really happy how this project has evolved, I feel like it's at a really good spot right now. 👍

https://jaredpalmer.com/formik/docs/api/fastfield
This is just a feature request for the future of this package. Could be really useful for some ( I might even try them out for optimization )

I believe the FastField uses the same API as Field so it shouldn't be too crazy to implement.
Not sure if we should make new components for each (but using FastField) or make some kind of switch in the component itself.
Either way, I'd hope it maintains our clean coding standard so far.

• Radio.Group
• Switch
• DatePicker

probably more...

I was considering adding some PRs but I like to be able to test local changes in my current project prior to submitting the PR.

I know in package.json you can reference another local file / directory as the source of the node module but I tried it and it doesn't seem to build well.
I get errors like

Uncaught TypeError: this.props.formik.registerField is not a function at FieldInner.componentDidMount

If I use the normal package installed via npm itself, I don't get these errors.

Maybe I need to publish / build the project first? Not sure.

My config-overrides.js is:

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      '@primary-color': constants.colors.Primary,
      '@secondary-color': constants.colors.Secondary,
    },
  }),
  fixBabelImports('antd', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  fixBabelImports('formik-antd', {
    libraryName: '@jbuschke/formik-antd',
    style: true,
    libraryDirectory: 'es',
  }),
);

I have a form, where I want to import formik-antd components:

import { Form, FormItem, Input } from '@jbuschke/formik-antd';

Then I receive an error:
Module not found: Can't resolve '@jbuschke/formik-antd/es/form/style'

formik-antd version 1.3.0.

Screenshot from antd:

Screenshot from formik-antd:

Original datepicker has tidy animation when it opens and closes up.
This datepicker appears immediately, why?

Hello! Do you have any plans to wrap the Antd Table component? I'm looking to build a form with the ability to add/delete identical objects without using arrays of multiple fields (rather using a table instead). Thanks!

Consider

<Formik
  ...
  render={() => (
    <Form>
      <FormItem name='rememberMe'>
        <Checkbox name='rememberMe'>
          Remember me
        </Checkbox>
      </FormItem>
    </Form>
  )}
/>

Toggling this checkbox does not set rememberMe field as touched.

Just installed the newer version of this package in my app.

Seems as though putting lodash.get inside the devDependencies is not enough.
Should probably be in dependencies.

npm start

> [email protected] start /Users/jwm/work/app/
> cross-env APP_TYPE=site API_ENV=dev umi dev


Warning: umi-plugin-polyfills has been deprecated.
use config.targets instead.


[hardsource:b8404551] Using 123 MB of disk space.
[hardsource:b8404551] Writing new cache b8404551...
[hardsource:b8404551] Tracking node dependencies with: package-lock.json, yarn.lock, .umirc.js, .umirc.local.js, config/*.

✖ Webpack
  Compiled with some errors in 18.35s

 ERROR  Failed to compile with 2 errors                                                                                         1:52:11 p.m.

This dependency was not found:

* lodash.get in ./node_modules/@jbuschke/formik-antd/lib/FormItem.js, ./node_modules/@jbuschke/formik-antd/lib/ListEditor.js

To install it, you can run: npm install --save lodash.get
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `cross-env APP_TYPE=site API_ENV=dev umi dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jwm/.npm/_logs/2019-04-12T17_52_11_924Z-debug.log

First off, excellent library and exactly what I was looking for. Antd's built-in form leaves a lot to be desired, especially around nested fields and arrays. Formik fills the gap perfectly.

I don't think the the validation success state should be enabled by default. An optional prop (showValidationSuccess) should be accepted by FormItem and only show the green success checkmark if it's true. From my experience and usage of forms showing validation success is more the exception rather than the rule. If you disagree, it can be enabled by default but at least provide an option to hide it.

Will submit a PR if I get some time.

There are a whole bunch of props that <Form.Item /> uses that I rely on. It would be very useful if the component would spread the rest props besides name and children to <Form.Item />

It seems exposing Formiks Field validate function does not have any effect. In the docs https://jaredpalmer.com/formik/docs/api/field its only used on bare Fields, so maybe it is only useful in such case.

           My code:           
                      <Select
                        defaultValue="Sunday"
                      >
                        <Select.Option value="Sunday">Sunday</Select.Option>
                        <Select.Option value="Monday">Monday</Select.Option>
                        <Select.Option value="Tuesday" >Tuesday</Select.Option>
                        <Select.Option value="Wednesday">Wednesday</Select.Option>
                      </Select>

Error:
Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
in div (created by Select)
in div (created by Select)
in div (created by Select)
in div (created by Select)

If we use <InputField /> as an example, the only Formik prop that you can pass to it is the name property. However as per the validation example https://jaredpalmer.com/formik/docs/guides/validation#field-level-validation

We need to pass a validate prop to the Field.

Can you elaborate a bit which labels you mean exactly?

Sure, here's a forked example of your CodeSandbox: https://codesandbox.io/s/y257p4l8z9

Edit: as a counter-example, look at antd's own CodeSandbox to see how the DOM differs: https://codesandbox.io/s/kw79qx5w15

The label element for [name=userName] does not have a for="userName", which breaks things like react-testing-library's getByLabelText and forces me to fallback to less optimal methods for finding and filling inputs, and breaks some browser / a11y behavior.

I have a feeling this is some sort of props issue, but honestly just have not had time to examine further.

(P.S. Thanks for making this!)

Originally posted by @joshsmith in #23 (comment)

Hi,
Your library is really useful however we can't use it with babel-plugin-import because style of antd aren't imported.

Hi there,

Is it possible to use formik-antd with react-input-mask?

Here is an example of react-input-mask with antd.

When I try to add it to formik-antd, I can see the mask onFocus, but it doesn't work onChange. Here is the demo.

Formik 2 is nearing completion and as far as I can tell, there is no reason that formik-antd should not simply work with Formik 2. I did some tests on a project I'm working on and it seems to be working just fine. So I would suggest to increase the allowed Formik version.

Getting started documentation says:

Add import "antd/dist/antd.css to your index.js file (or look at https://ant.design/docs/react/getting-started for other options).

And Antd's documentation has:
https://ant.design/docs/react/use-with-create-react-app#Customize-Theme

It also gives the ability to reduce the amount of css code which should be included by adding only used components.
https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides

But when I use formik-antd I lose this and can't customize theme anymore :(

Any solution for that?

It doesn't seem to make sense to disable SubmitButton by default when the form is invalid. What ends up happening is that the form is immediately invalid, and since errors don't show up on fields unless they have been touched (focused or submit button pressed), it is impossible to tell which form fields need to be fixed and you can't click submit to check.

I propose remove isValid check or changing it to (!isValid && submitCount > 0) or something similar.

Using this example from Formik
https://jaredpalmer.com/formik/docs/api/fieldarray

If we pass errors with the same way back as they are structured inside values.

e.g.:
values:

{
  filters: [
    { name: undefined }
  ]
}

errors:

{
  filters: [
    { name: "Required!" }
  ]
}

FormItem doesn't catch the error. Mostly like because it's expecting a flat level key name.

Similar to antd, I think it would make sense to include a "module" field in package.json along with a version of the build that uses ES2015 modules instead of only CommonJS. I was going through the code and I'm not quite clear what your actual build/deploy process is, but the fix should be as simple as:

Create another tsconfig (or use command line flags for tsc) to provide the following options (target ES2015 automatically sets module ES2015)

{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./es", "target": "ES2015" } }

Update package.json to point to the new directory

{ "files": [ "lib", "es" ], "module": "./es/index.js" }

Now more advanced bundlers, such as webpack 2 and rollup, will use the module files and can properly tree shake dependencies. This is all my understanding of how this works so it may not be 100%.

If I set the htmlType to button, it won't submit twice but form submit using enter key doesn't work anymore.

Sample code:

<Formik initialValues={{ username: "", password: "" }} onSubmit={this.handleSubmit}>
  {props => (
      <form className={styles.login} onSubmit={props.handleSubmit}>
        <FormItem name="email">
          <InputField name="email" placeholder="Email" autoComplete="username"
                      prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}/>
        </FormItem>
        <FormItem name="password">
          <InputField name="password" type="password" placeholder="Password" autoComplete="current-password"
                      prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}/>
        </FormItem>
        <FormItem>
          <SubmitButton className={styles.submit} type="primary" htmlType="submit" size="large">
            Login
          </SubmitButton>
        </FormItem>
      </form>
  )}
</Formik>