jannikbuschke / formik-antd Goto Github PK
View Code? Open in Web Editor NEWSimple declarative bindings for Ant Design and Formik.
Home Page: https://codesandbox.io/s/github/jannikbuschke/formik-antd-example
License: MIT License
Simple declarative bindings for Ant Design and Formik.
Home Page: https://codesandbox.io/s/github/jannikbuschke/formik-antd-example
License: MIT License
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.
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.
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: <DatePicker mode="year" name="eventYear" placeholder="Event year" />
Year can`t be selected
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 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.
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
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
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)
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.
probably more...
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.
package.json shows 0.9.0
npm shows 0.10.0
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
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%.
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>
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.
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
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
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!
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'
infixBabelImports
to see if it makes any difference.
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.
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)
Hi,
Your library is really useful however we can't use it with babel-plugin-import because style of antd aren't imported.
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.
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!
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.
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.
Currently I am not yet 100% happy with the FormItem component, as
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?
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
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.
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.
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 />
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.
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")
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)
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
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:
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>
Original datepicker has tidy animation when it opens and closes up.
This datepicker appears immediately, why?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.