Hi i'm using Formik and Yub library to validate Forms .I'm stuck in uncontrolled input of text to be controlled
In the beginning i have problem that Initial Values and i fixed with enableReinitialize={true} in Formik .But now with Field. On the document says Field can automatically inject onChnange and need props for input here
So I did like this
import { Formik, Form, Field } from 'formik';
<Formik
initialValues={intialData}
validationSchema={validationRules}
onSubmit={e=>console.log(e)}
>
{({ errors, setFieldValue, setFieldTouched, values, handleChange }) => (
<Form>
<Field name="name" value={data.name} /> //i have tried explicitly added type="text"
{error.name ? errors.name: ''}
</From>
)}
</Formik>
I didn't use onChange because Field automatically inject .But by giving like this
<Field name="name" value={data.name} />
i can't edit on field shows uncontrolled error so I tried like this
<Field name="name" defaultValue={data.name} /> // without giving onchange this also cant edit
so I tried like this
<Field name="name" defaultValue={data.name||""}/> // its working but the warning about uncontrolled input not going away
How get rid uncontrolled issue in Formik field .Im i doing in right way?
the Initial value is my issue i fixed with this answer
Related
New to Formik. I am trying to CSS format the field that will be emitted by Formik , but am coming up short. Is wrapping each Field with a the right approach? I was hoping to pass a style attribute to but it doesnt accept one.
You can pass className="your-class", and then style the class as needed.
<Field
className="main"
type="number"
name="numberInput"
... other props here ...
/>
will give you:
<input name="numberInput" class="main" type="number">
I'm setting up redux form in react application, in the form i have dual list box, i cannot shift values from one box to another, vise versa.
other thing im doing checkbox switches it doesn't post value when pages loads when ever i touch/click on it then it does, in both cased true/false but not default false.
for Dual list box
<Field
name="list"
type="select"
onChange={this.handleOnMove}
component={this.renderReactSelectWrapper}
/>
renderReactSelectWrapper = props => (
<DualListBox
value={props.input.value}
onChange={props.input.onChange}
onBlur={props.input.onBlur(props.input.value)}
options={available}
selected={selected}
placeholder="Select"
simpleValue
icons={{
moveLeft: <span key={0}><</span>,
moveAllLeft: [<span key={1}><<</span>],
moveRight: <span key={2}>></span>,
moveAllRight: [<span key={4}>>></span>],
moveDown: <span key={5}>↓</span>,
moveUp: <span key={6}>↑</span>
}}
/>
);
For Checkbox/Switch
<Field
name="available"
id="available"
component={this.renderToggleInput}
/>
renderToggleInput = field => ( <Switch checked={field.input.value} onChange={field.input.onChange} /> );
I need to have value shift from one box to another, in the case of checkbox/switch i need to post when page loads.
I was tackling the same problem. I think the issue is you aren't updating the selected array correctly. The follow code worked for me on the selected option.
<DualListBox
options={options}
value={this.props.input.value}
onChange={this.props.input.onChange}
selected={[...this.props.input.value]}
/>
I am thinking to use redux Form for my application.
can we maintain an object for text input types.
ex: I have one field Title so in redux store i want to main it as:
Title: {
en_US: "This is in English",
en_GB: "This is UK English",
fr_FR: "This is in french"
}
So I have flags for selecting languages whenever i change the language my form should be rendered with the locale selected.
Thanks
Yes, it's possible, but it has nothing to do with redux-form. You could just render the label for an input independently:
<label>{this.props.myTextLabel}</label>
<Field id="myText" /> // Field comes from redux-form
Another option is to use a custom component and pass the title to it:
<Field id="myText" component={MyInput} label={this.props.myTextLabel} />
const MyInput = ({ ..., label }) => {
return (
<div>
<label>{label}</label>
<input type="text" ... />
</div>
)
}
It seems the onChange is still broken (refer to similar question here).
The onChange will fire however you cannot use event.target.value as the event.target is on a parent of the element with the value attribute. For example, I have something like this:
<ToggleButtonGroup type="radio" name="detect" defaultValue={1} onClick={event => this.onInputMethodChange(event.target)}>
<ToggleButton value={1}>Translate</ToggleButton>
<ToggleButton value={2}>Detect</ToggleButton>
</ToggleButtonGroup>
when I console.log(event.target) I get a label element but the value is on the input element.
<label>
<input value="2" >
</label>
Is there a way to get this input value? It's not ideal but I could at least work with it. Thanks!
I'm trying to validate a form and it works well, the right messages appear...
My only problem is that my form fields are deleted if there are some errors.
Datas are taken by Database and be showed in forms with struts tags (so they're dynamic). If I put sono static value, that will not deleted after a wrong validation.
<s:form action="updateUser" method="post" id="updateUser"
name="updateUser" >
<s:textfield value="%{user.name}" class="modify" id="name" name="name" key="modify.name" required="true" />
this will be deleted while this:
<s:textfield value="HELLO" class="modify" id="name" name="name" key="modify.name" required="true" />
will not.
Any advice?
Have you set a User object in your Action Class? Do you have getters/setters for that object? Also how have you configured the "input" result of this action in struts.xml? Maybe you should use "chain" in result of INPUT (i guess this is the result you get from the validator.)