Questions tagged [formik]
Formik revolutionizes form handling in both React and React Native, offering an exceptional form library.
I'm having an issue with my Material UI DatePicker: <Grid item xs={12}> <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker ...
Is there a way to reset the state_id when I select a value from the Autocomplete for city_id? Currently, it doesn't clear out automatically. If you want to see the code in action, please click on the link below: CLICK HERE CODE <Autocomple ...
I am currently utilizing a data structure in Prisma and Nextjs that includes authentication via Next-Auth. The structure is as follows: user |-->profile |-->log |-->sublog At the moment, CRUD operations are being sent to the datab ...
Is there a way to clear error messages that appear beneath a text field when resetting form fields with values from an api call? In my Formik form, I have three fields that are loaded from an api database call along with a Reset button that reloads these ...
I need to access the value of a field before submitting the form in order to verify it. I tried using the onChange event for this purpose, but the field remains empty and the value is not displayed. My stack includes Mui and Formik. This is the initial se ...
I have encountered two issues with my React app. The parent component contains a button that, when clicked, displays a simple dialog with a text input and a submit button. Strict mode is enabled. The problems I am facing are: The initial value set for the ...
I am struggling to understand why one approach works and the other does not. One approach that works can be found here: pastebin. However, the second approach found here: pastebin does not work. The main difference between these two approaches is that in ...
Validation needed for an array of strings (tags). The strings should be in lowercase, maximum 14 characters long, and not required. I attempted to implement this validation, however, I need to modify it to make the tags not required. This means they shoul ...
Material UI text-fields are being used and validated with Formik. I am looking for a way to map items to avoid repetitive typing, but encountering difficulties in doing so. return ( <div> <Formik initialValues={{ email: '&a ...
My current issue involves validating input using formik, yup, material-ui, and react-input-mask. When trying to use min/max length in the validationSchema, I am facing some challenges. The .required option works correctly, but when setting a mask for the i ...
I recently developed a custom QR code reader feature as a button within the Formik component customTextInput.tsx, but I encountered an issue where clicking on the button would trigger a submission without any value present. The following code snippet show ...
Typically, this is the way the <ErrorMessage> tag from Formik is utilized: <ErrorMessage name="email" render={(msg) => ( <Text style={styles.errorText}> ...
Hello, I am currently utilizing the FORMIK form in my project and have integrated a few custom components such as a text field and select component. Now, I am looking to incorporate a date and time picker into the form using the Material UI library. Here i ...
I have a query regarding my usage of Formik in my React application. Within the onSubmit function, I am making an API call to a service. If this call fails, I want to immediately stop the rest of the submission process without executing any further action ...
Looking to enhance a Formik form framework by integrating a decrementer/incrementer button group. Link to Button Group Demo Button group codebase: import React from "react"; import Button from "@material-ui/core/Button"; import Button ...
I'm working on implementing the Material UI Toggle Button as a radio button to present 2 choices for a question to the user. Most aspects of it are functioning as expected, but I am facing an issue when trying to customize the style for the selected ...
I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...
Trying to implement a Checkbox tree using Material-UIs Tree with formik for the form (checkboxes). I'm close to achieving it, but facing an issue where clicking on a parent node checkbox should also check its children nodes. Any suggestions on how to ...
Can you provide a solution for the following scenario: For example, we have a checkout form with multiple delivery options, each requiring different details: In-store - requires only storeId Delivery office - requires cityId and officeId Courier - requir ...
Upon submitting a form using Formik, I encountered a warning that says: "A component is changing a controlled input to be uncontrolled. This issue usually arises when the value changes from a defined to undefined, which should not occur. It's importan ...
I am currently utilizing the power of Yup in conjunction with Formik within my react form setup. The fields within the form are dynamic, meaning their validations need to be dynamic as well. export const formData = [ { id: "name", label: "Full n ...
This is the main code section for my app const App = () => { const classes = useStyles(); const formik = useFormik({ initialValues: { name: "", email: "", password: "", confirmPassword: "" }, validationSc ...
Currently, I am in the process of building an application using react, formik, and material-ui. The challenge I am facing is trying to incorporate a slider into this project. It seems that the material-ui slider component does not expose the name prop to f ...
I'm currently working on validating an autocomplete multiple select using Formik. It initially works when a button is clicked, but I've noticed that if the selected value is removed, the validation doesn't trigger. import React from &quo ...
Here is a snippet of the code I'm working on: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx I am currently in the process of creating a form that will accept an array of objects called Criterion, which are of a specific type: export inte ...
Utilizing Material-UI along with Formik, I am trying to enable two input fields to modify a single value. The scenario involves having a TextField and a Slider where both inputs should have the ability to change the value for period. When assigning the sam ...
Is it possible to include custom validations in Formik's YupValidationSchema as shown below? YupValidationSchema = () => { return Yup.object({ Email: Yup.string() .max(256, "Length exceed 256 chars") ...
My modal is causing all inputs to be re-rendered with every change I make while typing. I have a Formik object set up like this: const formik = useFormik({ enableReinitialize: true, initialValues: { sp_id: data?.id, ...
Is anyone familiar with the useFormik hook? I am trying to validate a username and password on the server using the handleLogin(username, password) method. This is the code snippet I am currently working with: const LoginForm = withFormik({ mapPropsToV ...
While using Material UI Switches with Formik, I've encountered an issue. When I toggle the switch to 'enable,' it automatically sets the value in Formik to "true," and when I toggle it to 'disable,' it sets the value in Formik to " ...
I encountered an error while using the onSubmit prop of Formik: The type '(values: { email: string; password: string; }) => { type: string; payload: { email: string | null; password: string | null; }; }' is not compatible with the type '(( ...
How can I ensure that the input in Formik is restricted to the currentYear and later years only? const currentYear = new Date().getFullYear(); expiryYear: yup .string() .required('Please select an expiry year') .min(4, `Year format must be grea ...
Hey there! I'm currently working on a form using Formik within NextJS and I have integrated a switch to allow users the option of using their contact details for invoicing purposes. While I have separate fields for both contact details and invoice de ...
I am facing an issue with Formic where the value I store does not return to me as expected. The problem arises when the filter finds a specific value and logs it in line 57, then places the same value in Formic on line 58. However, when I log the Formic ...
Encountering an issue with MUI Select (multiple) within a Formik form. Let's say there is a task stored in the database with properties taskName and assignTo (an array of staff). The aim is to create a form where the assignTo values can be updated/cha ...
I apologize for the recent influx of questions, but our volunteer mission is scheduled for December and I have a lot to accomplish. These initial inquiries will assist me in completing the remaining tasks! At this point, I am seeking the most effective me ...
ISSUE: Successful form validation and async requests on desktop, but not functioning properly on mobile devices. TECHNOLOGY USED: Implemented nextjs, formik, and yup for the solution. DESCRIPTION: Developed a user-friendly form submission site that oper ...
In my current project, I am utilizing React alongside Formik and TypeScript. The code snippet below demonstrates my usage of the withFormik Higher Order Component (HOC) in my forms: import React from 'react'; // Libraries import........ import { ...
After submitting the form data, I am utilizing formik.resetForm() to clear values from text fields. ... const handleSubmitProduct = async (values: Object, resetForm: any) => { ... code for processing form data ... resetForm() if (respon ...
When attempting to upload a file, the entire component refreshes each time. The process involves 3 steps: the first step captures the user's name, the second step collects their address, and the third step allows them to upload a profile picture. Howe ...
I am currently working with a material select component: <FormControl fullWidth variant="outlined" className={classes.formControl}> <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple"> Filial </InputLabel> <Sel ...
Looking to integrate Formik with a Switch component that utilizes the design of a tooltip from the antd library. The basic implementation code resembles this: import React from 'react'; import 'antd/dist/antd.css'; import './i ...
I'm facing an issue with the default value in my autocomplete feature within my React app. Even though I set a default value, when I try to submit the form, it still shows as invalid because it appears to have no value until I manually click on the au ...
Currently, I am working on a social media application that requires users to create unique usernames. Technology Stack The technology stack consists of Next.js, Prisma, and MySQL (hosted by Planetscale). Within the application, Formik and Yup are used fo ...
I've encountered an issue with my form and song state while trying to add a new field called "appleMusicId". Unfortunately, every time I add this field, it seems to reset the values of timeDescription and sceneDescription. I've spent hours tryin ...
It seems that Formik and antd Form both offer similar functionalities: 1. validation 2. data-binding 3. error messages Find more information about Formik here Explore antd Form's features here Are their functions identical? ...
I've encountered an issue with my Formik form that utilizes Yup for validation. I'm having trouble integrating a Datepicker field into the yup validation process. Here's the code where everything renders correctly, but when I try to nest &l ...
I have a form that includes a select input for choosing a country and a text input field that requires validation based on the selected country's EU tax regex. I am attempting to use yup for this task, but I am unsure how to retrieve the value of ano ...
In my code, I have an initial values list saved as an array: initialValues ={ ranges: [{ fromDate: '', endDate: '' }, { fromDate: '', endDate: '' }, { fromDate: '', endDate: &apos ...
What is the best way to validate an optional field that must not include special characters such as #<`> and a white space before a dot (.)? I have created a regex pattern \`|\#|\&|\<|\ \.|\> for this purp ...
In an effort to organize my form code more efficiently, I've been working on putting schemas in separate files. However, I've run into a issue where when I export a yup schema and then import it into another schema, the validation doesn't se ...
Is there a way to utilize Yup validation so that a field becomes mandatory if at least one of three other fields is not empty? I attempted the schema below but encountered a cyclic dependency issue. Any help would be greatly appreciated! const schema = ...
I am eager to incorporate Formik with MUI, but I am struggling to find a straightforward way to do so. The documentation is confusing and the examples provided are not very helpful. For instance, on this page, which is one of Formik's top-level examp ...
I'm struggling to figure out why the validation isn't functioning as expected: export default function Check() { const label = { inputProps: { "aria-label": "termsOfService" } }; const formSchema = yup.object().shape({ ...
Currently, I am working on creating a form using React JS and the Formik library. One issue I encountered was related to validation, specifically the need to replace invalid letters with an empty string. str.replace(/\D/, ''); The challenge ...
When using the handleChange function from Formik with the DateInput component in "semantic-ui-calendar-react", I encountered an error upon selecting a date. https://i.stack.imgur.com/l56hP.jpg shows the console output related to the error. AddWishlistFor ...
My Formik field is displayed below. I am trying to trigger the onChange (or onKeyUp) event to execute some operation. Despite attempting solutions from previous questions on the same issue, nothing seems to be working for me so far. Can you please help i ...
Just joined Yup and struggling to validate an array that is not empty. My tech stack includes react, formik, yup, and material-ui. Here's a sample I put together: Check out the example here I attempted to use the required method in validationSchem ...
Is there a way to call a custom function on a Formik field when using the onChange event? I've tried calling it but it's not working as expected. Below is my custom function within a React Component: onStudentScore = (value, form) => { ale ...
Integrating the Formik with the Select component of MUI presented me with a few obstacles. Initially, it failed to update the value on the onChange event and did not display any error messages when nothing was selected. After some troubleshooting, I was ...
Currently, I am utilizing Formik along with Yup for a project that is in progress. I am in the process of creating a multi-step form. The goal is to display the second step inputs when the user clicks on the next button, only if the inputs from step 1 are ...
I am currently working on building a form using Next.js, TypeScript, and the Formik + Yup libraries. I've encountered two scenarios: one where an input field is visible and Formik captures the value, and another where the input is not visible and the ...
I recently developed a form using a combination of technologies including react, react-query, material ui, formik, and yup for schema validation. Check out the code here Custom fields I created: SelectField AutocompleteField CacheAutocompleteFie ...
I have been trying to set the initial value of a date in my component like this, but when it renders I am encountering an error. const formik = useFormik ({ initialValues: { dob: new Date () } }) During this process, I'm facing the follow ...
Thank you for taking the time to read this. I am currently working on creating a form using Formik that involves nesting a FieldArray within another FieldArray. Oddly enough, setFieldValue seems to be functioning correctly as I can log the correct values ...
In my Formik object, I have set initial values as follows: {customerDetails: {id: "", name: "", mobileNumber: ""}, notes: {id: "", text: "", type: ""}} How can I create a conditional Yup validati ...
How can I ensure that a string follows the specific format of x.xx.xxxxx? The first character is mandatory, followed by a period, then two characters, another period, and finally any number of characters of varying lengths. ...
My form is built using mui, formik, and yup. If the input fields are empty (e.g. "surname") after clicking the submit button, an error is displayed. However, the issue arises when the checkbox for Terms of Service isn't checked as no error shows up. ...
In my current web project, I am utilizing a combination of React, Material-UI, Formik, and formik-material-ui. Specifically, I have implemented a Formik form that includes validation using yup. const schema = yup.object({ name: yup.string().trim().low ...
I am looking to showcase how validation errors are displayed when a user clears their selection. https://i.stack.imgur.com/ULEgs.png For reference, here is the sandbox link: https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.ts ...
When I click the "Change" button in an Antd table with data, the entire line of data is passed to a function as an object. However, I am having trouble inserting the data into the fields. What should I do? How can I set data to Antd input using an externa ...
I have implemented the validation schema below using Formik: validationSchema = { Yup.object({ emails: Yup.array() .of(Yup.string().email('Ensure to enter valid email addresses only.')) .min(1, 'Please ...
Seeking guidance on how to manipulate or repopulate an existing form in React with backend data. I am using Formik and Formik Grid along with Axios for data retrieval. My goal is to edit a specific item in the inventory by updating its values from the da ...
I am facing an issue with validation. I would like to set a rule that allows selecting both the start_date and end_date only if the access value is 1. Otherwise, if the access value is not 1, then only today's date should be selectable. Check out the ...
After submitting a Formik react form, I need to retrieve data via Ajax and set it as a variable in the redux store import React from 'react'; import {connect} from 'react-redux'; import { withFormik, Form, Field } from 'formik&apo ...