I currently struggle with the button "Auto generate link". Once clicked, the Field "link" should be filled with the data "http://predefinedlink.com"
Due to the combination of Formik + Material UI used here, I struggle to achieve that.
const useStyles = makeStyles((theme) => ({[...]}));
const EventStream = ({ onSubmit, eventStream }) => {
const classes = useStyles();
return (
<Formik
initialValues={{
link: maybe(() => eventStream.link, "") || "",
}}
onSubmit={onSubmit}
validateOnBlur={false}
validateOnChange={false}
enableReinitialize
>
{({ handleSubmit, isSubmitting, dirty }) => (
<FormikForm autoComplete="off" noValidate>
<Card>
<CardContent>
<Grid container spacing={3}>
<Grid xs={12} item>
<Field name="link" label="Link" component={TextField} />
<button
onClick={console.log("Fill TextField 'link' with new data")}
>
Auto generate link »
</button>
</Grid>
</Grid>
</CardContent>
<CardActions className={classes.cardActions}>
<Button
variant="contained"
color="primary"
classes={{
root: clsx(classes.saveButton, {
[classes.saveButtonDirty]: !dirty,
}),
disabled: isSubmitting && classes.saveButtonDisabled,
}}
disabled={isSubmitting || !dirty}
onClick={handleSubmit}
>
Save
{isSubmitting && (
<CircularProgress
size={20}
thickness={5}
color="inherit"
className={classes.saveButtonProgress}
/>
)}
</Button>
</CardActions>
</Card>
</FormikForm>
)}
</Formik>
);
};
export default EventStream;
You may need to use setFieldValue
{({ handleSubmit, isSubmitting, dirty }) => (
to
{({ handleSubmit, isSubmitting, dirty, setFieldValue }) => (
The button click handler
<button
onClick={()=> {
setFieldValue ('link', 'http://predefinedlink.com')
}
}
>
Auto generate link »
</button>
Related
I'm trying to implement a rather complicated form that has and date picker and input which the user can add multiple of (or delete). That data then gets added to the overall form on submit. How do I get react-hook-forms to register that little dynamic faux form within the real form?
Here's the faux form inputs:
<AddPackagesStyle>
<Label htmlFor="addedPackages" label="Add Packages" />
<DatePicker
id="dateRange"
selected={startDate}
selectsRange
startDate={startDate}
endDate={endDate}
placeholderText="select dates"
onChange={onDateChange}
/>
<PackageInput
id="PackageSelect"
placeholder="Select Package"
type="text"
value={name}
// #ts-ignore
onChange={(e) =>
// #ts-ignore
setName(e.target.value)
}
/>
<ButtonContainer>
<button type="button" onClick={clearAll}>
Clear
</button>
<button
type="button"
// #ts-ignore
onClick={addPackage}
>
Add
</button>
</ButtonContainer>
</AddPackagesStyle>
These entries get added to an array in a useState hook:
const [addedPackages, setAddedPackages] = useState<any[]>([])
Then this gets rendered in JSX as the add packages:
<ContentSubscriptionWrapper>
{addedPackages.length !== 0 &&
addedPackages.map((addedPackage, idx) => (
// #ts-ignore
<>
<ContentSubscriptionColumn>
{addedPackage.name && addedPackage.name}
</ContentSubscriptionColumn>
<ContentSubscriptionColumn>
{addedPackage.startDate &&
addedPackage.startDate.toString()}
</ContentSubscriptionColumn>
<ContentSubscriptionColumn>
{addedPackage.endDate && addedPackage.endDate.toString()}
</ContentSubscriptionColumn>
<button type="button" onClick={() => removePackage(idx)}>
X
</button>
</>
))}
</ContentSubscriptionWrapper>
So before the form gets submitted, the 'add packages' has to be set. Where do I add the {...register} object to add to the larger form object for submission?
const {
control,
register,
handleSubmit,
formState: { errors },
} = useForm<any>()
const onSubmit = (data: any) => {
console.log(data)
}
I created a CodeSandbox trying to reproduce your use case and used Material UI to get it done quickly, but you should get the idea and can modify it with your own components.
you should let RHF handle all the state of your form
use RHF's useFieldArray for managing (add, remove) your packages/subscriptions - there is no need to use watch here
use a separate useForm for your <AddPackage /> component, this has the benefit that you will have form validation for this sub form (in case it should be a requirement that all fields of <AddPackage /> need to be required) - i added validation in the demo to demonstrate this
AddPackage.tsx
export const AddSubscription: React.FC<AddSubscriptionProps> = ({ onAdd }) => {
const {
control,
reset,
handleSubmit,
formState: { errors }
} = useForm<Subscription>({
defaultValues: { from: null, to: null, package: null }
});
const clear = () => reset();
const add = handleSubmit((subscription: Subscription) => {
onAdd(subscription);
clear();
});
return (
<Card variant="outlined">
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Grid container spacing={1} p={2}>
<Grid item container spacing={1} xs={12}>
<Grid item xs={6}>
<Controller
name="from"
control={control}
rules={{ required: "Required" }}
render={({ field }) => (
<DatePicker
{...field}
label="From"
renderInput={(params) => (
<TextField
{...params}
fullWidth
error={!!errors.from}
helperText={errors.from?.message}
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={6}>
<Controller
name="to"
control={control}
rules={{ required: "Required" }}
render={({ field }) => (
<DatePicker
{...field}
label="To"
renderInput={(params) => (
<TextField
{...params}
fullWidth
error={!!errors.to}
helperText={errors.to?.message}
/>
)}
/>
)}
/>
</Grid>
</Grid>
<Grid item xs={12}>
<Controller
name="package"
control={control}
rules={{ required: "Required" }}
render={({ field: { onChange, ...field } }) => (
<Autocomplete
{...field}
options={packages}
onChange={(e, v) => onChange(v)}
renderInput={(params) => (
<TextField
{...params}
label="Package"
fullWidth
error={!!errors.package}
helperText={errors.package && "Required"}
/>
)}
/>
)}
/>
</Grid>
<Grid item xs={12}>
<Stack spacing={1} direction="row" justifyContent="end">
<Button variant="outlined" onClick={clear}>
Clear
</Button>
<Button variant="contained" onClick={add} type="submit">
Add
</Button>
</Stack>
</Grid>
</Grid>
</LocalizationProvider>
</Card>
);
};
Form.tsx
export default function Form() {
const { control, handleSubmit } = useForm<FormValues>({
defaultValues: {
seats: "",
addOns: false
}
});
const { fields, append, remove } = useFieldArray({
control,
name: "subscriptions"
});
const onSubmit = (data) => console.log("data", data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Box display="flex" justifyContent="end" gap={1}>
<Button variant="outlined">Cancel</Button>
<Button variant="contained" type="submit">
Save
</Button>
</Box>
</Grid>
<Grid item xs={12}>
<Controller
name="seats"
control={control}
render={({ field }) => (
<TextField {...field} fullWidth label="Seats" />
)}
/>
</Grid>
<Grid item xs={12}>
<AddSubscription onAdd={append} />
</Grid>
<Grid item xs={12}>
<List>
{fields.map((field, index) => (
<ListItem
key={field.id}
secondaryAction={
<IconButton
edge="end"
aria-label="delete"
onClick={() => remove(index)}
>
<DeleteIcon />
</IconButton>
}
>
<ListItemText
primary={field.package.label}
secondary={
<span>
{formatDate(field.from)} - {formatDate(field.to)}
</span>
}
/>
</ListItem>
))}
</List>
</Grid>
<Grid item xs={12}>
<Controller
name="addOns"
control={control}
render={({ field: { value, onChange } }) => (
<FormControlLabel
control={<Checkbox checked={!!value} onChange={onChange} />}
label="Add-ons"
/>
)}
/>
</Grid>
</Grid>
</form>
);
}
I am using Formik and have the following setup below where I want to be able to reset the form when the user presses the "Cancel" button. On return to the form, all form values should be reset to initialValues which are all nulls.
<Formik
enableReinitialize
initialValues={{
...INITIAL_FORM_STATE
}}
validationSchema={ FORM_VALIDATION }
onSubmit={handleSubmit}
>
{({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (
<Form>
.....
I have the following code for the Cancel button:
<Button
text="Cancel"
startIcon={<UndoIcon />}
variant="contained"
color="default"
className={classes.buttons}
component={Link}
to={'/home'}
onClick={() => {
{resetForm}
setMenu("Home")
}}
/>
After entering some text into a form field and pressing the Cancel button, which directs me back to the Home page, I then go back to the form and notice that my text is still in state within the form and not resetting.
Can anyone please assist with what I am missing.
<Button
text="Cancel"
startIcon={<UndoIcon />}
variant="contained"
color="default"
className={classes.buttons}
component={Link}
to={'/home'}
onClick={() => {
resetForm()
setMenu("Home")
}}
/>
You should use the resetForm() as a function call
you just need to set values of the input boxes to formik values:
<Formik
enableReinitialize
initialValues={{
...INITIAL_FORM_STATE
}}
validationSchema={ FORM_VALIDATION }
onSubmit={handleSubmit}
>
{({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (
<input value={values.propertyName}/>
<Form>
and now resetForm should work well
You must change values through values since you dont have access to resetForm from the button.
<Button
text="Cancel"
startIcon={<UndoIcon />}
variant="contained"
color="default"
className={classes.buttons}
component={Link}
to={'/home'}
onClick={() => {
values = {
someProperty: null,
}
}}
/>
As as I see your are using Material UI. I notice that you have a "to" property in your Button component I think you have to decide either remaining on the same page and reset your form or redirecting to another page. If you want to remain on the same page I would suggest you to get rid of it because this causes some conflict. You can implement it like this:
return (<Formik
enableReinitialize
initialValues={{
...INITIAL_FORM_STATE
}}
validationSchema={ FORM_VALIDATION }
onSubmit={(values, actions) => {
actions.setSubmitting(false);
console.log("Submit form", values);
}}
>
{({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, handleSubmit, resetForm }) => (
<Form onSubmit={handleSubmit}>
..... some inputs
<Button
text="Cancel"
startIcon={<UndoIcon />}
variant="contained"
color="default"
className={classes.buttons}
component={Link}
onClick={() => handleReset(resetForm)}
/>
</Form>
)}
</Formik>
);
And inside you class create a handleReset method:
const handleReset = (resetForm) => {
if (window.confirm('Reset?')) {
resetForm();
setMenu("Home");
}
};
`
const myForm = useFormik({
initialValues:{
value1:'',
value2:''
},
onSubmit:( values ) = >{
//submit data
........
//reset form after submit
myForm.resetForm()
}
)
on return
<form onSubmit={myForm.submit}>
........
<Button type="submit"/>
<Button onClick={()=>myForm.resetForm()}>Reset</Button>
</form>
`
I am learning React.js and I have this Codesandbox that is a a Material-Ui boilerplate. I try something now like I want the login Facebook Button when clicked to handle Facebook login.
I read the Docs and can't see any explanation for this situation. Even the Codesandbox Material-UI suggests this is a good approach.
This is what I have tried, it looks like this:
<Formik
initialValues={{
email: 'demo#devias.io',
password: 'Password123',
facebook: 'dddd',
}}
validationSchema={Yup.object().shape({
email: Yup.string().email('Must be a valid email').max(255).required('Email is required'),
password: Yup.string().max(255).required('Password is required'),
})}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
<form onSubmit={handleSubmit}>
<Box mb={3}>
<Typography color="textPrimary" variant="h2">
Sign in
</Typography>
<Typography color="textSecondary" gutterBottom variant="body2">
Sign in on the internal platform
</Typography>
</Box>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Button
className={classes.Facebook}
fullWidth
startIcon={<FacebookIcon />}
onClick={handleSubmit}
size="large"
variant="contained"
name="facebook"
type="facebook"
value={values.facebook}
>
SIGN in with Facebook
</Button>
</Grid>
........
As you see on the image the:
<Button
className={classes.Facebook}
fullWidth
startIcon={<FacebookIcon />}
onClick={handleSubmit}
size="large"
variant="contained"
name="facebook"
type="facebook"
value='sdsadadadsadada'
>
SIGN in with Facebook
</Button>
I have the type="facebook" and value='sdsadadadsadada set but when I click the button the onClick={handleSubmit} does not show this values in the handleSubmit , it show the default values like:
What I want is to handle login depending on this tree types, Facebook, Google or email. Do I have to create a Button onClick separately for the Facebook and Google Buttons to handle this? What am I doing wrong?
I found the answer here.
Basically it looks like this:
function FormContainer(props) {
const [formType, setFormType] = useState(DEFAULT_FORM_TYPE);
const handlerSubmit = (methodX, methodY) => async values => {
if (formType === FORM_TYPE_X) {
return await methodX(values);
}
return await methodY(values);
};
const submitFormType = (formTypeSubmited, handleSumitType) => () => {
setFormType(formTypeSubmited, () => handlerSubmit());
};
return (
<Formik
onSubmit={handlerSubmit(props.saveToApiMethodX, props.saveToApiMethodY)}
validate={values => props.validate(formType, values)}
>
{(values, handleSubmit, errors) => (
<>
<button onClick={submitFormType(FORM_TYPE_X, handlerSubmit)}>
Method X
</button>
<button onClick={submitFormType(FORM_TYPE_Y, handlerSubmit)}>
Method Y
</button>
</>
)}
</Formik>
);
}
I have a form with some inputs of type "select". One of them works like: The user selects one service and click on "Add" button to add to a list of services, but after this click, the previously selected values (cliente, funcionario) are getting empty.
<Formik
enableReinitialize
validationSchema={formSchema}
onSubmit={(values, { resetForm }) => {
entry
? props.setSubmit(values, entry.id)
: props.setSubmit(values, resetForm);
}}
initialValues={defaultValues}
>
{({
handleSubmit,
handleChange,
values,
errors,
touched,
setFieldValue,
}) => (
<Modal
show={modalForm}
onHide={handleClose}
backdrop="static"
size="lg"
>
<Modal.Header closeButton>
<Modal.Title>Preencha o formulário</Modal.Title>
</Modal.Header>
<Form onSubmit={handleSubmit}>
<Modal.Body>
<Combobox
label="Cliente"
name="cliente"
onChange={handleChange}
value={values.cliente}
errors={errors.cliente}
options={customers}
/>
<Combobox
label="Funcionário"
name="funcionario"
errors={errors.funcionario}
onChange={async e => {
handleChange(e);
setFieldValue(
'comissao',
await loadComission(e.target.value)
);
}}
value={values.funcionario}
options={employees}
/>
<hr />
<CustomCombo
className="cbwbuton"
label="Serviço"
name="servico"
onChange={handleChange}
value={values.servico}
options={services}
>
<Button
variant="outline-primary"
onClick={() => {
console.log(values.funcionario);
addServ(values.servico);
}}
>
<i className="fa fa-plus-circle" />
</Button>
</CustomCombo>
AddServ function:
const addServ = async id => {
if (id !== '') {
try {
const newServ = await api.get(`/service/${id}`);
await setServicosRealizados([...servicosRealizados, newServ.data]);
} catch (error) {
console.log(error);
}
}
};
On screen the values "cliente" and "funcionario" still selected, but these values is empty on output json when I submit. Could someone help me with this issue?
I'm using Formik in my React and redux project, but Formik fields are not getting value and onChange field function not working!
this form is for editing a customer. I'm using Formik in another part of project and i don't have a problem. I don't know what to do?
<Formik
initialValues={props.selectedCustomer.id ? props.selectedCustomer : emptyCustomer}
validationSchema={customerValidationSchema}
onSubmit={async (values: ICustomer, actions: FormikActions<any>) => {
console.log(values)
try {
await postCustomer(values)
props.selectedCustomer.id ? enqueueSnackbar('success') : enqueueSnackbar('fail')
actions.resetForm()
getCustomers(pageNum, pageSize)
setAddDialog(false)
}
catch (error) {
enqueueSnackbar(error, { variant: 'default' })
}
}}
>
{() => (
<Form id="addCustomerForm">
<div id="addCustomerDiv" className={clsx({
[classes.noDisplay]: !addDialog
})}>
<Grid style={{marginRight: '0.5rem'}} container spacing={5}>
<Grid item xs={2}>
<Field
name="firstName"
render={({ field, form }: FieldProps<ICustomer>) => (
<TextField
margin="dense"
id="firstName"
label="firstName"
fullWidth
{...field}
error={form.errors.firstName && form.touched.firstName ? true : false}
/>
)}
/>
</Grid>
<Button
type='submit'
form="addCustomerForm"
color="primary"
variant="contained"
style={{marginTop: '3rem'}}
className={clsx({
[classes.noDisplay]: !addDialog
})}
>
submit
</Button>
</Grid>
</Grid>
</div>
</Form>
)}
</Formik>
what is the problem?
I added enableReinitialize in Formik component and it worked.