I have ran into this bug, where I press the Login button, but nothing happens. In browser it works perfectly, but has some issues with capacitorJS. I have tried adding onClick function right on the button, removing Formik functionality, placing something before the try - catch. However, when using with Formik, validation actually works, it tells that the inputs can't be empty and checks email format.
This is the UI part
<form autoComplete="on" onSubmit={handleSubmit}>
<BrandTextField
name={'email'}
onChange={handleChange}
value={values.email}
placeholder={t('common:emailPlaceholder.exampleEmail')}
type={'email'}
label={t('common:email')}
className='mb-3'
error={Boolean(touched.email) && Boolean(errors.email)}
fullWidth
/>
<div>
<BrandTextField
name={'password'}
type={'password'}
onChange={handleChange}
value={values.password}
placeholder={t('common:password')}
label={t('common:password')}
className='mb-3'
error={Boolean(touched.password) && Boolean(errors.password)}
fullWidth
/>
<div
className="login-forgot-password"
onClick={() => history.push('/forgot-password')}
>
{t('signIn.signInScreen.forgotPassword')}
</div>
</div>
<div className="login-submit">
<Button type="submit" size={'auto'}>
{t('common:signIn')}
</Button>
</div>
</form>
And here is the useFormik
const {
values,
handleChange,
errors,
touched,
handleSubmit,
} = useFormik<CredentialsPayload>({
initialValues,
validationSchema,
onSubmit: async (values, { setErrors }) => {
toast.error('submit');
try {
await dispatch(actions.signIn(values));
} catch (err) {
if (err.message) {
toast.error(err.message);
}
setErrors(err.errors ?? {});
}
},
});
The issue was with the way I handled submit, It should be written onClick of button
Related
I'm trying to create an image upload on my form. The problem is when I try to change the value to the actual uploaded file. I am trying to use setFieldValue, but it says it is undefined. Below is the code. Any ideas why it is undefined? I thought it comes with Formik.
import { Formik } from 'formik';
const AddProduct = (props) => {
return (
<Formik
initialValues={{
serviceImage: null
}}
onSubmit={(values) => {
console.log(values);
}}
>
{({
errors,
handleBlur,
handleChange,
handleSubmit,
setFieldValue,
isSubmitting,
touched,
values,
formProps
}) => (
<form onSubmit={handleSubmit}>
<TextField
error={Boolean(touched.serviceName && errors.serviceName)}
fullWidth
helperText={touched.serviceName && errors.serviceName}
label="Service name"
margin="normal"
name="serviceName"
onBlur={handleBlur}
onChange={handleChange}
value={values.serviceName}
/>
<Button>
<input
id="file"
name="serviceImage"
value={values.serviceImage}
type="file"
onChange={(event) => formProps.setFieldValue('serviceImage', event.target)
}
/>
Add an Image
</Button>
<Button
type="submit" >
Post this service on the Events Platform
</Button>
</form>
)}
</Formik>
);
};
You already declare setFieldValue in your formik callback function
So change it to:
<input
id="file"
name="serviceImage"
value={values.serviceImage}
type="file"
onChange={event => setFieldValue('serviceImage', event.currentTarget.files[0])}
/>;
im using react-hook-form for form validation and submission ,everything work's fine with single submit type button, now i need to have three buttons , "Save Draft" ,"Preview Data Values in Page" ,and "Submit for approval " ,i can opt-out for a Mode Selection radio Buttons ,But wanted to have three button submit function, which needs form data . adding onchnage for input fields will work ,but form validation needs to write again .
const { register, handleSubmit } = useForm();
const onSubmit = (data) => alert(JSON.stringify(data));
function NeedTohaveFormDataHere1(Data) {
} function NeedTohaveFormDataHere2(Data) {
}
return ( <form onSubmit={handleSubmit(onSubmit)}>
<Headers />
<input name="firstName" ref={register} placeholder="First name" />
<input name="lastName" ref={register} placeholder="Last name" />
<select name="category" ref={register}>
<option value="">Select...</option>
<option value="A">Category A</option>
<option value="B">Category B</option>
</select>
<button onClick={NeedTohaveFormDataHere1}>
Save Draft
</button >
<button onClick={NeedTohaveFormDataHere2}>
Preview
</button>
<input type="submit" />
</form>
);
}
onSubmit function will get form data ,how to get form data in other two button functions ?
sloved .. with
<button onClick={handleSubmit(NeedTohaveFormDataHere1)}>
Save Draft
</button >
<button onClick={handleSubmit(NeedTohaveFormDataHere2)}>
Preview
</button>
I had the same problem and I resolved it the following way:
I have two buttons, the first bottom validates and submits the form normally. The second button only validates and calls a custom function.
I'm assuming you have the situation. One button to save and one to store a draft.
<form id="example-form" onSubmit={handleSubmit(handleOnSave)}>
<IconButtonTooltip
form="example-form"
title="Only save"
>
<SaveIcon className={classes.icon} />
</IconButtonTooltip>
<IconButtonTooltip
form="example-form"
title="Save and sign"
onClick={handleSubmit(handleOnSingAndSave)}
>
<SignatureIcon className={classes.icon} />
</IconButtonTooltip>
</form>
const handleOnSingAndSave = () => {
// Handle things...
}
It works for me!
You can use handleSubmit in multiple place.
const handleSubmitDraft=()=>{
handleSubmit(aync(data)=>{...})()
}
const handleSubmitPreview=()=>{
handleSubmit((data)=>{...})()
}
<button onClick={handleSubmitDraft}>
Save Draft
</button >
<button onClick={handleSubmitPreview}>
Preview
</button>
if you have to handle the multiple submit buttons in react-hook-form
1. remove your submit method from the form tag and add it to your button click
2. move your submit buttons outside the form tag
const { handleSubmit } = useForm();
<form>
<input />
<input />
</form>
<button onClick={handleSubmit((d) => console.log(d))} > Save </button>
<button onClick={handleSubmit((d) => console.log(d))} > Draft </button>
I used yup with resolver for validation so my answer might differ. I also used trigger to validate without submitting. I also reset the form so that it won't be marked 'dirty' after saving.
export default function MyForm(props) {
const {
control,
reset,
trigger,
handleSubmit,
getValues,
formState: { isDirty },
} = useForm({
mode: "onBlur",
reValidateMode: "onBlur",
shouldUnregister: true,
defaultValues: {
name: "",
id: "",
//rest of values
},
resolver: yupResolver(schema),
});
const handleOnSubmit = async (event) => {
if(!isDirty){
//navigate out of page
} else {
//save and exit
}
}
const handleOnSave = async () => {
trigger(); //triggers validation for whole form
const formValue = getValues();
const isValid = schema.isValidSync(formValue);
if(isValid){
//await save actions
if(savedSuccessfully){
reset(formValue);
//anything else
}
}
};
}
You can try giving name and type to a button and catch it using window.event.submitter.name.
<button type="submit" name="submit">Submit</button>
<button type="submit" name="draft">Draft</button>
<form onSubmit={handleSubmit} > ...
const handleSubmit = () => {
const buttonType=window.event.submitter.name // will return draft or submit and you can handle it using switch case.
if(buttonType==="submit"){
//HANDLE SUBMIT FUNCTION
return;
}
if(buttonType==="draft"){
//HANDLE DRAFT FUNC
return;
}
}
But this solution doesn't work in safari
I did it in the next way:
onSubmit - form submission handler
<Button type="submit">Post</Button>
<Button
appearance="stroke"
onClick={handleSubmit((data) =>
onSubmit({
...data,
status: CreateResumeRequestStatusEnum.Draft,
})
)}
>
Save for later
</Button>
Edit
As it turns out, it was working all along -- the issue was because my handleLogin method was async
New sandbox:
I have a basic Form component. It passes setSubmitting as one of the available methods, and it passes isSubmitting as well. I want to disable the submit button while the form is submitting, but I'm having trouble with this.
Initially, I had a <form> element and I was trying to set setSubmitting(true) in the below part:
<form
onSubmit={(credentials) => {
setSubmitting(true); // <--
handleSubmit(credentials);
}}
>
But this didn't work. So I've tried getting rid of the <form> and changing <Button> to type="button" instead of submit, and I did,
<Button
color="primary"
disabled={isSubmitting}
fullWidth
size="large"
type="button"
variant="contained"
onClick={() => {
setSubmitting(true);
handleLogin(values);
}}
>
Submit
</Button>
But the problem with this, is that in order to do setSubmitting(false) in case of an error is that I have to do this,
onClick={() => {
setSubmitting(true);
handleLogin(values, setSubmitting); // <--
}}
And in addition to this, I have no use for onSubmit={handleLogin}, but if I remove that, Typescript complains.
There's got to be an easier way to accomplish this (without using useFormik).
What can I do here?
Here is the component:
import * as React from "react";
import { Formik } from "formik";
import { Box, Button, TextField } from "#material-ui/core";
const Form = React.memo(() => {
const handleLogin = React.useCallback(async (credentials, setSubmitting) => {
console.log(credentials);
setTimeout(() => {
setSubmitting(false);
}, 2000);
}, []);
return (
<Formik
initialValues={{
email: ""
}}
onSubmit={handleLogin} // removing this line make Typescript complain
>
{({
handleSubmit,
handleChange,
setSubmitting,
isSubmitting,
values
}) => (
<div>
<TextField
fullWidth
label="Email"
margin="normal"
name="email"
onChange={handleChange}
value={values.email}
variant="outlined"
/>
<Box sx={{ my: 2 }}>
<Button
color="primary"
disabled={isSubmitting}
fullWidth
size="large"
type="button"
variant="contained"
onClick={() => {
setSubmitting(true);
handleLogin(values, setSubmitting);
}}
>
Submit
</Button>
</Box>
</div>
)}
</Formik>
);
});
export default Form;
You forget to put the form inside your Formik component
<Formik>
{...}
<form onSubmit={handleSubmit}>
{...}
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
</Formik>
so now you can use your button as submit.
demo: https://stackblitz.com/edit/react-egp1gc?file=src%2FForm.js
I'm trying to use react-hook-form together with the antd <Input /> component
I'm not getting reset to work with <Controller />
Here is my code:
const NormalLoginForm = () =>{
const {reset, handleSubmit, control} = useForm();
const onSubmit = handleSubmit(async ({username, password}) => {
console.log(username, password);
reset();
});
return (
<form onSubmit={onSubmit} className="login-form">
<Form.Item>
<Controller as={<Input
prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
autoFocus={true}
placeholder="Benutzername"
/>} name={'username'} control={control}/>
</Form.Item>
<Form.Item>
<Controller as={<Input
prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
type="password"
placeholder="Passwort"
/>} name={'password'} control={control}/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
</Form.Item>
</form>
);
}
I'm expecting that the two input fields are getting cleared when the form is submitted. But that doesn't work.
Am I missing something here?
Example on Stackblitz
https://stackblitz.com/edit/react-y94jpf?file=index.js
Edit:
The RHFInput mentioned here React Hook Form with AntD Styling is now part of react-hook-form and has been renamed to Controller. I'm already using it.
I've figured out that chaning
reset();
to
reset({
username:'',
password:''
});
solves the problem.
However - I wanted to reset the whole form without explicitly assigning new values.
Edit 2:
Bill has pointed out in the comments that it's almost impossible to detect the default values for external controlled inputs. Therefore we're forced to pass the default values to the reset method. That makes totally sense to me.
You must wrapper the components for antd and create a render component, it is very similar if you use Material UI, So the code can be like:
import { Input, Button } from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import {useForm, Controller} from 'react-hook-form';
const RenderInput = ({
field: {
onChange,
value
},
prefix,
autoFocus,
placeholder
}) => {
return (
<Input
prefix={prefix}
autoFocus={autoFocus}
placeholder={placeholder}
onChange={onChange}
value={value}
/>
);
}
export const NormalLoginForm = () =>{
const {reset, handleSubmit, control} = useForm();
const onSubmit = ({username, password}) => {
console.log(username, password);
reset();
};
return (
<form onSubmit={handleSubmit(onSubmit)} className="login-form">
<Controller
control={control}
name={'username'}
defaultValue=""
render={ ({field}) => (
<RenderInput
field={field}
autoFocus={true}
placeholder="Benutzername"
/>
)}
/>
<Controller
render={ ({field}) => (
<RenderInput
field={field}
type="password"
placeholder="Passwort"
/>
)}
defaultValue=""
name={'password'}
control={control}
/>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
>
Log in
</Button>
</form>
);
}
export default NormalLoginForm;
You can notice that I did't put the Icon ,it was because I tested using the version 4 for antd and something change in how to use the icons.
This is probably not the best place to post this question but where, then?
The code below is taken from Formik's overview page and I'm very confused about the onSubmit handlers:
The form element has an onSubmit property that refers to handleSubmit which is passed on that anonymous function : <form onSubmit={handleSubmit}>. Where does that come from?
The Formik component has an onSubmit property as well:
onSubmit={(values, { setSubmitting }) => { ... }
How do these relate to each other? What is going on?
import React from 'react';
import { Formik } from 'formik';
const Basic = () => (
<div>
<h1>Anywhere in your app!</h1>
<Formik
initialValues={{ email: '', password: '' }}
validate={values => {
let errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
/* and other goodies */
}) => (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
{errors.email && touched.email && errors.email}
<input
type="password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
/>
{errors.password && touched.password && errors.password}
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
)}
</Formik>
</div>
);
export default Basic;
The component takes onSubmit as a prop where you can execute code you want to perform when you submit your form. This prop is also given some arguments such as values (values of the form) for you to use in your onSubmit function.
The handleSubmit form is auto generated from the Formik library that automates some common form logics explained here. The handleSubmit will automatically execute onSubmit function mentioned above as part of its phases (pre-submit, validation, submission). Hope that answers your question!