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?
Related
I am using react final-form in my web application. Currently checkbox is required so that I am getting default tooltip : Please check this checkbox if you want to proceed
I want to change this tooltip text. is it possible to pass any FieldProp?
<Form.Check
name={name}
checked={value}
onChange={onChange}
onClick={onClick}
onBlur={(e) => onBlur(e)}
required={required}
disabled={disabled}
type="checkbox"
label={inputLabel}
className={inputClassName || ''}
/>
i have an issue with react hook form and material-ui file uploading when submiting the form i got string path of one file instead of FileList
instance
<Controller
name='attachments'
control={control}
defaultValue=''
render={({ field }) => <input {...field} type='file' multiple />}
/>
full code on codesanbox:
https://codesandbox.io/s/xenodochial-bhaskara-9vo13?file=/src/App.js
For it to work, you will have to implement your own onChange property. You can use the field.onChange callback for this purpose and pass it the file list as an argument. Here's how it can be done:
<Controller
name="attachments"
control={control}
defaultValue=""
render={({ field }) => (
<input
type="file"
onChange={e => {
field.onChange(e.target.files);
}}
multiple
/>
)}
/>
Here is the link to the forked source code
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=""
/>
So, the main problem is, that antd form does not detect my custom input based on antd standard input:
There is a piece of form code (AddProduct):
<Form.Item
className="m-t-10"
name="price"
rules={[
{
required: true,
message: `${t('FORM.ERR.SHOP.PRICE')}`,
},
]}
>
<CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
</Form.Item>
There is my custom input (CurrencyInput):
return (
<Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)
The problem is when I try to submit the form it does not detect currency input, throws err that this field is required. Any ideas are it possible to implement custom input, basically, it's more HOC than custom input
You need to pass to your custom component all props, because Form.Item pass to there onChange and value props
function CustomInput({size, placehodler, name, ...restProps}) {
return (
<Input size={size} placeholder={placeholder} name={name}
type="number" prefix={settings[6].value} {...restProps} />
)
}
I have created an input component to try avoid repetition of the bootstrap divs/classes. It looks like this:
import React from "react";
import "./Input.css";
const Input = ({ name, label, error, ...rest }) => {
return (
<div className="form-group">
<label htmlFor={name}>{label}</label>
<input
{...rest}
id={name}
name={name}
className="form-control form-control-lg"
></input>
{error && <span className="input-error">{error}</span>}
</div>
);
};
export default Input;
Then on the form, I just call it like this:
<Input name="lastName label="Last Name" type="text" />
But because I want to use Formik I have to add the onBlur, onChange and error. But it is very repetitive to have to add those to each input. I have tried to add them into my Input component but I obviously get errors about useFormik not existing and I am a bit stuck. This is the input after adding formik
<Input
name="lastName"
label="Last Name *"
type="text"
value={formik.values.lastName}
onBlur={formik.handleBlur}
onChange={formik.handleChange}
error={formik.touched.lastName && formik.errors.lastName}
/>
I basically want to be able to add onBlur, onChange and error to the input component.
You have to wrap your inputs with Formik as it injects context to React tree, then you will be able to use useField in your custom input component.