-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to know if an input is required? #712
Comments
I think it's a question for stackoverflow. |
@jeromeraffin, I think you can do that very easily by sending props to your renderInput Component and then you can display it, for example:
Then in your renderInput component you can do something like this: So, asterisk is only visible if you have provide it in your props. I hope that would help you! |
The solution above is essentially hardcoding. It duplicates the definitions you're making in Yup and does not solve the problem of being able to tell if I field is conditionally required: Consider the following yup form schema for a
There is no way (that I see) to reuse this logic in Formik, which means you need to duplicate it somewhere. I think the way to solve this would be to provide the validation schema back to the component along with the other formik props. Then it's Yup's job to provide ways of inspecting the schema for this sort of thing, (which it may already do). |
Hi @afraser I don't really understand your approach, please can you share a code snippet. |
@nero2009 I've moved on from this project but basically it's common to do this sort of thing <InputField
showRequiredAsterisk={field.isRequired}
label={field.label}
error={field.error}
value={field.value}
onChange={setField(field.name)}
/> Formik abstracts away most of these props with magic around the |
Hi all, I had a similar issue and I made a function to check if a field is required: import { getIn } from 'formik'
export const isRequiredField = ({ validationSchema }, name) =>
!!getIn(validationSchema.describe().fields, name).tests.find(
testName => testName === 'required'
) It can be used this way: import { connect } from 'formik'
import { isRequiredField } from './utils'
const InputText = ({ formik, ...rest}) => {
const { handleChange, handleBlur } = formik
const { name } = rest
return (
<div>
{isRequiredField(formik, name) &&
<strong>*</strong>
}
<input
{...rest}
type='text'
onChange={handleChange}
onBlur={handleBlur}
/>
</div>
)
}
export default connect(InputText) It is not an elegant soution... but it works! 😄 DISCLAIMER: I did not test properly the code, and I'm not sure if it's a good practice to rely in yup's test name (which is "required") to check this. I would like to hear what you think about this solution! |
@d-asensio Nice. Better than having to define whether a single field is required in two places. |
I've added this as a feature request: #1241 |
@d-asensio, the code you provided did not work for me when using
In that case (I just noticed that this same comment was made by someone else over on #1241) |
@nbrustein I have the same issue. Did you find a fix for this? |
Why is this closed ? |
+1, still actual issue. |
Doing this is not currently possible unless you use the HoC approach (as shown in @d-asensio's example) because Formik is explicitly not passing down the See #1241 |
Looks like the API has changed slightly, tests is no longer an array of strings but an array of functions. I updated the function to account for this and also added some code to handle nested form objects import { getIn } from 'formik'
export const isRequiredField = ({ validationSchema }, name) =>
!!getIn(validationSchema.describe().fields, name.split(".").join(".fields.")).tests.find(
test=> test.name === 'required'
) Here is a slightly more verbose version but a bit easier on the eyes export const isRequiredField = (validationSchema, name) => {
const schemaDescription = validationSchema.describe()
const accessor = name.split(".").join(".fields.")
const field = getIn(schemaDescription.fields, accessor)
if (!field) {
return false
}
const isRequired = field.tests.some((test) => test.name === "required")
return isRequired
} |
I just got bit with this. Unfortunately I'm using inside of my component instead wrapping with connect(). As @0livare mentions, useFormikContext() does NOT return validationSchema even though the typings say it should. Is anyone still using this workaround, and does connect() with a HoC still work? Also, does this just work with more complex Yup rules? For example:
|
Probably this is a better solution right now: const checkIsRequired = (
validationSchema: ObjectSchema<any>,
fieldName: string
) => {
const schemaDescription = validationSchema.describe();
const field = schemaDescription.fields[fieldName];
return !!(field && 'optional' in field && field.optional === false);
}; But it still doesn't look good |
I'm using the isValid to check if my input is valid with the schema that I've defined with the help of Yup. And for example the email input is required in my schema. But I'm wondering if it's possible to know from the formik props if an input is required or not in order to add a '*' after the label. Maybe something like a 'isRequired'?
The text was updated successfully, but these errors were encountered: