turner-industries / formik-semantic-ui Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://www.npmjs.com/package/formik-semantic-ui
Home Page: https://www.npmjs.com/package/formik-semantic-ui
Using an object that has nested properties:
{
name: '',
physicalAddress: {
addressLine1: '',
addressLine2: '',
city: '',
state: '',
zip: '',
}
}
And an component like:
<Input label="Address 1" name="physicalAddress.addressLine1" />
My errors won't show up for any physicalAddress
item. I believe this is because of the way you're trying to access the errors in the helper.js
on line 7 - form.errors[name]
.
These may be helpful:
jaredpalmer/formik#413
http://blog.nicohaemhouts.com/2015/08/03/accessing-nested-javascript-objects-with-string-key/
All the Semantic UI Form statics are copied onto this Formik Form. Add these to the type files. Ex:
public static Field: typeof FormField;
I was trying to calculate value in Input B based on Input A, times other value, but I couldn't find solution better than extending onChange callback parameters list.
My solution was to return form instance in onChange callback:
onChange={(e, {name, value}) => { setFieldValue(form, name, value, false); Promise .resolve() .then(() => { onChange && onChange(e, {name, value, form}); }); }}
and then use form.setFieldValue inside my own onChange callback.
If it is the best solution, I could make a PR.
Thanks in advance, great idea with making this repository,
I had made a quick (and maybe incorrect) implementation of the TypeScript type definition:
https://gist.github.com/littlebtc/0effc6ab4cec4a56346b1bd877238424
I think it is better to include an official type definition as I am switching to TypeScript development and I am trying to use this library.
The issue I'm having right now is that I'm unable to dynamically add/remove form fields dependent on form values.
Sample:
{values.name === 'John' && ( <Form.Group widths="equal"> <TextArea label="sample" name="sampleField" /> </Form.Group> )}
How do I go about this?
Sample link
Based on the example, I would like to ask whether the errors message can be customized and placed in a specific position?
like this:
return (
<Form initialValues={stateUser} onSubmit={_handleSubmit}>
<Input label="Email" name="emailAddress" />
{/* <ErrorMessage name="emailAddress" /> */}
<Form.Group widths="2">
<Input label="First Name" name="firstName" />
<Input label="Last Name" name="lastName" />
</Form.Group>
{
<div>
<div>error: Email</div>
<div>error: First Name</div>
<div>error: Last Name</div>
</div>
}
<Button.Submit>Submit</Button.Submit>
<Button.Reset>Cancel</Button.Reset>
</Form>
);
Typescript complains when setting a value on a Radio element:
<Radio name='option' label='Option 1' value='option1' />
<Radio name='option' label='Option 2' value='option2' />
Type '{ name: string; label: string | object | (string | object)[] | undefined; value:'option1'; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'value' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. TS2322
Then manually adding an 'value: string' option to the definition it works (like plain JS).
This happens when you apply the validation from an API response rather than using client-side validation.
This is related to a similar issue when using serverValidation
prop. If you have errors you can click the submit button to clear all the errors. Then it will allow you submit the form again
I'm building a dropdown with an empty value as default but a required() validation. The first time I select a valid value, I get the error message.
So I added a Yup test custom validator to log what happens. When a dropdown changes, the validation is called twice: first with the new value then with the initial value.
This is the reverse order. When using a Input field, we are called twice too but with the old value first.
Here is a very simple example:
import {Icon} from 'semantic-ui-react'
import {Button, Dropdown, Form} from 'formik-semantic-ui'
import * as Yup from 'yup'
export default function Test2() {
const validationSchema = Yup.object().shape({
gender: Yup.string().required().test((value, context) => {
console.log(value, context)
return true
})
})
return <Form validationSchema={validationSchema} initialValues={{gender: ""}}>
<Dropdown
label="Gender"
name="gender"
options={[
{text: "", value: ""},
{text: 'Female', value: 'F'},
{text: 'Male', value: 'M'},
]}
/>
<Button.Reset>
<Icon name='remove'/> {"Reset"}
</Button.Reset>
<Button.Submit>
<Icon name='checkmark'/> {("Submit")}
</Button.Submit>
</Form>
}```
When dealing with string textboxes, it makes sense to default null values to empty strings. However, when the type is numeric, the default value should be 0
. This should be explicit though as undefined/null
may have different implications than 0
.
I personally think that at the API level, there should not be a difference in meaning between undefined/null
and 0
So I wanted to use placeholder
for <Dropdown>
and I realized that it's not available in formik-semantic-ui
. how can this be added to the library? can you help me to contribute?
So now for every error in validation of filed we get something like:
<span class="sui-error-message">Field is empety.</span>
how can add some custom calsses to this? is it possible?
I cannot find possibility to use dropdown component as multiselect. Can I achieve the same result as in semantic/ui dropdown ?
Thanks in advance.
How to achieve loading status when Form is started?
Hi guys,
I noticed that version 0.9.0 of your lib is available on NPM but the latest version on GitHub seems to be 0.8.2. Is there a good reason why the source for v0.9.0 isn't available?
Also, I created a fork where I added those changes present on NPM into your code and fixed the tests so the framework can be built against semantic-ui-react all the way to the latest version 0.86.0 (https://github.com/danpfe/formik-semantic-ui) but before I continue working I just wanted to get some clarity on the specific versioning-issue.
Thanks!
/D
Is there a way to access Formik status
? I see that handleSubmit
and isSubmitting
are bound automatically, but I don't see status
.
Automatically binds Formik
handleSubmit
for Semantic UI Form onSubmit
Automatically binds FormikisSubmitting
for Semantic UI Form loading
We've been using status
for feedback messages after server-side validation. Any pointers? Thanks.
It appears that the 'multiple' property for Semantic's Dropdown is not handled via this project's Dropdown wrapper. It is not explicitly passed through and doesn't appear to get handled via safeProps.
When the default/initial value of a property is set to an array and multiple is set to true, React still complains that `value must not be an array when 'multiple' is not set'.
Hello,
I believe that radio buttons are supported for this library, shown in Github pages:
https://turner-industries.github.io/formik-semantic-ui/
However, I cannot find any example code for implementing this. Radio buttons are missing from the codepen example:
https://codesandbox.io/s/ywjoykw95x
I cannot for the life of me figure out how these should work. And example would be amazing!
Thanks!
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.