I am not able to code in the right way such that formik.values will reflect into Material UI's Checkbox
Checkboxes are a little tricky to include in third party forms packages, and Material UI doesn't help with that either.
What you need to do is use the FormControlLabel component to handle the onChangge event that formik needs. Then on the Checkbox you just set the checked prop to be whatever formik has in its values.
Here is an example I use for a Checkbox to set an isAdmin value.
const formik = useFormik({
initialValues:{
isAdmin: false
},
});
<FormControlLabel
control={<Checkbox checked={formik.values.isAdmin} />}
label="is Admin"
name="isAdmin"
onChange={formik.handleChange}
/>
Using 'as'
Use the as prop with Formik Field and pass any props required to the Field itself. It will pass them onto FormControlLabel. For example, here the label field is passed down to FormControlLabel:
<Field
type="checkbox"
name="myFormikName"
as={FormControlLabel}
control={<Checkbox />}
label="This will trigger my formik name field"
/>
Multiple checkboxes using 'as'
If you have multiple checkboxes with the same name (array) you need to pass the "checked" value like so. Checks if the Formik 'name' array includes the name.
const { values } = useFormikContext()
render (
{names?.map(name => (
<Field
type="checkbox"
name="names"
value={name.fullName}
key={name.id}
as={FormControlLabel}
control={<Checkbox/>}
checked={values.names.includes(name.fullName)}
label={name.fullName}
/>
))}
)
Using 'setFieldValue'
const { values, setFieldValue } = useFormikContext()
<FormControlLabel
control={<Checkbox />}
label="My mui label"
checked={values.myMuiCheck}
onChange={() =>
setFieldValue(
'myMuiCheck',
!values.myMuiCheck,
)
}
/>
Related
I'm using React Hook Form and React-Bootstrap and I'm trying to set up a radio button group.
Radio 1 should be selected by default and then the user can switch between them.
Because I'm using Form.Check from React-Bootstrap I'm wrapping it in a React Hook Form Controller (Wrapper component for controlled inputs).
It should look like this:
This works fine for all the normal text inputs:
<Controller
control={control}
name="name"
defaultValue=""
render={({ field: { onChange, value, ref } }) => (
<Form.Control
type="text"
onChange={onChange}
placeholder="Name"
value={value}
isInvalid={!!errors.name}
ref={ref}
/>
)}
/>
But for radio boxes this doesn't seem to work. It's rendered without a default checked box, I can select both of them, and the submitted data is always the same.
Here's the code for the radio boxes:
Controller
control={control}
name="myradiovalue"
defaultValue="radio1"
render={({ field: { onChange } }) => (
<>
<Form.Check
onChange={onChange}
type="radio"
label="Radio 1"
id="formAdapterRadio1"
value="radio1"
/>
<Form.Check
onChange={onChange}
type="radio"
label="Radio 2"
id="formAdapterRadio2"
value="radio2"
/>
</>
)}
/>
How should this look? Separate Controllers maybe?
I'm curious if anyone has used conditional fields in react-hook-from but within a map function. I've got the basic rendering happening, but since it is in a list and they all refer to the same .map() criteria, it is populating the conditional input for all fields, regardless if they are checked. Heres the basic idea for using conditional fields in RHF: https://codesandbox.io/s/react-hook-form-conditional-fields-qgr41
Heres what I've got so far:
{goals && goals.map((goal) => (
<>
<FormControlLabel
control={
<Switch
key={goal.title}
//id..? marked? title?
{...register('marked')}
name='marked'
value={goal.marked}
/>}
label={goal.title}
/>
<br />
{marked && (
<>
<Input
key={goal.title}
{...register('goal.note')}
id="note"
type='text'
label="Progress Note"
name="note"
onChange={(e) => {
e.target.value = e.target.value
}}
/>
<br />
</>
) }
The problem is that from the UI side, when I toggle the switch (or mark a checkbox), that all the fields populated in the map are referring to the same prop in the switch, 'marked'. So when toggling for 1, it populates the additional input field for all elements in the map function.
An additional issue I have yet to look into is passing the data for the individual fields to the data collected by the form for the submit. Right now, my assumption is that all fields would be treated as one value, since the form is recognizing them all together. So ideally if one item in the map is toggled and additional info is provided, then only those values are passed to the form for the submit, rather than all fields (toggled or not) being passed.
UPDATE
So I got the toggle functioning by creating a child component in order to more easily manage the state of the toggle, and leveraging the index within the props so the browser would not treat each conditional field as the same:
parent component:
{goals && goals.map((goal, index) => (
<GoalInput
goal={goal}
index={index}
register={register}
control={control}
errors={errors}
/>
new child component:
function GoalInput({ goal, index, register, control, errors }) {
const [toggle, setToggle] = useState(false)
return (
<>
<FormControlLabel
control={
<Switch
key={index}
{...register(`goals.${index}.marked`)}
checked={toggle}
name={`goals.${index}.marked`}
value={toggle}
onChange={() => setToggle(!toggle)}
/>
}
label={goal.title}
/>
<br />
{toggle ? (
<>
<Controller
control={control}
name={`goals.${index}.note`}
id={`goals.${index}.note`}
render={({field}) => (
<Input
type='text'
index={index}
error={!!errors.note}
value={field.value}
onChange={(e)=>field.onChange(e)}
label="Progress Note"
/>
)}
/>
<br />
</>
) : <></>}
</>
)
}
So the toggles work independently, appropriately record whether the value of the toggle is true/false, and the subsquent conditional input in being tracked as well. Still have some struggles with the data being passed correctly through to the backend, but that is another issue. Hope this helps anyone coming along.
I'm trying to use a react-select component inside of a form created using react-hook-form. I have followed the instructions from the react-hook-form website here, but when I submit the form the value from the select component is "" (the default value).
I know that the form is working in general because other values that are input with ref={register} work fine. It's just this one value that I'm using the Controller for. Am I missing a prop in the Select component or am I going wrong somewhere else?
I have a parent component where the form is defined:
<Form id="public-share-form" onSubmit={handleSubmit(onSubmit)}>
<Controller
as={<PublicShareNetworkSelect />}
name="network"
control={control}
defaultValue=""
/>
</Form>
Then a child component for the react-select component used in the as prop of the Controller:
return (
<Select
closeMenuOnSelect={true}
options={networks}
noOptionsMessage={() => "No matching options"}
defaultValue=""
className="basic-single"
classNamePrefix="select"
/>
);
I think you need to use Select directly like this:
<Controller
as={
<Select
closeMenuOnSelect={true}
options={networks}
noOptionsMessage={() => "No matching options"}
defaultValue=""
className="basic-single"
classNamePrefix="select"
/>
}
name="network"
control={control}
defaultValue=""
/>
I am trying to use Material UI radio buttons with Formik, and they are not clicking properly. I've reduced the problem to the following example: https://codesandbox.io/s/amazing-currying-s5vn0
If anyone knows what I might be doing wrong, or if there is a bug in either system, then please let me know. When clicking on the buttons in the above example, they do not stay clicked. I have a more complex react functional component that uses other library components, so I cannot include it here. It is behaving a little differently: the buttons stay clicked even after clicking a different button. It may or may not be the same issue. Thanks in advance.
You need to be rendering the radio buttons inside of the FormikRadioGroup component you are rendering as a Formik Field. That way you can actually pass the props being managed by Formik down to the components to be used, as well as allow the RadioGroup component to make sure only one button is clicked at a time. I added an options prop to provide a way to pass an array of radio options and removed all of the elements you were rendering outside of that component:
const FormikRadioGroup = ({
field,
form: { touched, errors },
name,
options,
...props
}) => {
return (
<React.Fragment>
<RadioGroup {...field} {...props} name={name}>
{options.map(option => (
<FormControlLabel value={option} control={<Radio />} label={option} />
))}
</RadioGroup>
{touched[fieldName] && errors[fieldName] && (
<React.Fragment>{errors[fieldName]}</React.Fragment>
)}
</React.Fragment>
);
};
Fork here.
EDIT: Updated the sandbox with an alternate example using a render function as a child within the Field component.
import { FormControlLabel, Radio, LinearProgress } from '#material-ui/core';
import { Formik, Field } from 'formik';
import { RadioGroup } from 'formik-material-ui';
<Formik {...otherProps}>
{({ isSubmitting }) => (
<Field component={RadioGroup} name="activity">
<FormControlLabel
value="painting"
control={<Radio disabled={isSubmitting} />}
label="Painting"
disabled={isSubmitting}
/>
<FormControlLabel
value="drawing"
control={<Radio disabled={isSubmitting} />}
label="Drawing"
disabled={isSubmitting}
/>
<FormControlLabel
value="none"
control={<Radio disabled={isSubmitting} />}
label="None"
disabled
/>
</Field>
)}
</Formik>;
Now this is documented! Using RadioGroup from formik-material-ui.
https://stackworx.github.io/formik-material-ui/docs/api/material-ui/
I use material UI and a field text of type TextField. But when I was seized in my field email, the seizure does not appear to the screen and the value does not change in the email field.It always remains the same value.
Handle change is not working. the value is not passing to the handleChanges remains the same value
<TextField fullWidth={true}
className={classes.margin}
label={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email" />}
id="email"
ref="email"
name="eamil"
type="email"
value={authentification.email}
onChange={this.handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
Here is the code. Correct me What is the issue in that
Thanks in Advance.
In order to make the value change, you need to change a state (in the screen or external).
For instance (with bad performance but just to explain):
add to your cunstrunctor if exists:
constructor(props) {
super(props);
this.state = {
emailInputText: undefined //or empty string
}
}
Then change TextField component value and onChange props to:
value={this.state.emailInputText}
onChange={(text) => this.setState({emailInputText: text})}
I will consider to remove the ref='email'.