I have set up the following form using Formik:
const RenderForm = ({ errors, isSubmitting, isValid, touched }) => {
return (
<Form>
<h3>Sign Up</h3>
<Email
name="email"
error={touched.email && errors.email ? 'error' : null}
/>
<Password
name="password"
error={touched.password && errors.password ? 'error' : null}
/>
<Button disabled={!isValid || isSubmitting} type="submit">
Submit
</Button>
{/* {errors.firebaseErrorMessage && ( */}
{/* <Help>{errors.firebaseErrorMessage}</Help> */}
{/* )} */}
</Form>
)
}
The Email component and the Password components are just wrappers for the Formik Field Component. I want to be able to add a red border a particular field if it fails validation.
To do that, I have set up a conditional for the error prop. IF it is touched AND IF the error is passed, then it renders that prop with a value of 'error'.
Now there are a few problems with this.
FIRST PROBLEM
I don't need to render a value of 'error' (or any other value) to the error attribute. I just need to have the attribute 'error' itself (without any value) and then it will be styled appropriately.
SECOND PROBLEM
It's a bit annoying to write out the same conditional test for each field. I would like to know if there is something like the ErrorMessage component, except for a prop. Basically, something like this:
<Email name="email" errorProp />
<Password name="password" errorProp />
The idea being that errorProp will set an attribute of 'error' if an error exists and nothing if an error does not exist.
So here is my question...
How can I create my own errorProp or, at the very least, simplify what I am trying to do?
Thanks.
Related
Hello this is my code:
<Form
layout='horizontal'
size='small'
onFinish={this.handleSubmit.bind(this)}
>
<Form.Item
label={`Organization:`}
name={`Organization`}
>
<Input
onChange={
(e) => this.handleOrgInput(e)
}
/>
</Form.Item>
<Button
icon={
this.state.showMenu ?
<CaretDownOutlined />
:
<CaretRightFilled />
}
shape="circle"
onClick={() => {
{
this.handleFetchSystemData()
}
disabled={this.state.showMenu}
style={{marginLeft: 5}}
/>
{this.state.showMenu && this.state.myName!==undefined ?
<div>
{console.log('Name :', this.state.myName}
<Form.Item
name={"Name"}
label={`Name:`}
initialValue={this.state.myName}
>
<Input
// defaultValue={this.state.myName}
/>
</Form.Item>
<Form.Item
name={"lastName"}
label={`LastName:`}
initialValue={this.state.myLastName}
>
<Input
// defaultValue={this.state.myLastName}
/>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
size="middle"
>
Submit
</Button>
</Form.Item>
</div>
:
undefined
</Form>
When i am pressing the button i call my server to fetch the data. But when i change the input and then clicking again the button the values on the Form.Item are remain the same, but my state has change. I can see that my state changes because i console.log it.
When i comment the initialValue attribute on Form.Item and using defaultValue attribute on Input component my values are changing smoothly, but when i press sumbit the values are not senting from the Form. This is a problem for me
I have seen a lot about this situation, but most of it regards functional components and not class components. Also i have seen that with class components some people using refs but Form component has not attribute ref. I have seen this regarding class components but did not help me. In the end the antd documentation regards i think functional components and not class, so i am a comfused.
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 have a field in a form that I want to render based on another field's value.
I listen to "OnChange" event of the field, and then trigger form.change of the new field (which is not rendered yet), but it won't get the value while rendered.
I created a sandbox for the issue: https://codesandbox.io/embed/priceless-keldysh-gfd3b
THe expected result: when selecting "Heat", scaling factor should be displayed and get the value '1'
What is the best practice to solve that? assuming there are a lot of dependencies inside a form.
Since <Form /> need visible <Field /> for subscribe
but your field scalingFactor would be removed when values.meterType !== "heat"
{values.meterType && values.meterType === "heat" && (
<Field name="scalingFactor" component="input" />
)}
You need to change your code as bellow:
<Field name="scalingFactor">
{({ input }) => {
return (
<React.Fragment>
{values.meterType && values.meterType === "heat" &&
<input {...input} />
}
</React.Fragment>
);
}}
</Field>
I am building a redux form and I would like to create a »Retype Password« field which is rendered next to the password field. I have this code:
const renderRow = (field) => {
return (
<div className={`form-row ${field.type}`}>
<label>{field.label}</label>
<Field field={field} component={renderPassword} name={field.name} />
</div>
);
}
const renderPassword = ({field, input, meta: { error, touched }}) => {
return (
<div className="password-inputs-wrap">
<input type="password" {...input} />
<input type="password" {...input} name="password-retype" />
{touched && error && <RenderError error={error} />}
</div>
);
}
Right now this renders two password fields, but changing one, changes the other at the same time.
The renderRow is a bit simplified here, since the component for that field is not hard coded as show here. So this password field is an exception, since it consists of two <input>s. For all other fields, which consist of a single <input>/<select />, etc, it works fine.
How can I »decouple« this retype <input> from the first one?
You need two fields (two Fields).
I want to have two simple input boxes.
There is a loginName input box, and a password input box.
Currently I map the value of these two input box into a "state".
Now, using NativeBase. How do I dynamically show "success" "error" like how they did in the demo?
http://nativebase.io/docs/v0.5.9/components#successInputTextbox
Passing a prop success is equivalent to passing success={true}
So if you have state variables like inputSuccess and inputError, you can do this:
<InputGroup
iconRight
success={this.state.inputSuccess ? true : false}
error={this.state.inputError ? true : false}>
<Icon name='ios-checkmark-circle' style={{color:'#00C497'}}/>
<Input placeholder='Textbox'/>
</InputGroup>
The Native Base documentation (version 2.12) has this example:
state = { error: 'Some error' };
// ...
<Content>
<Item error={this.state.error !== ''}>
<Input
placeholder='Textbox with Error Input'
error={'#d50000'}
/>
<Icon name='close-circle' />
</Item>
</Content>
The error prop inside <Input /> is to set the error color. The invalid state is set at the item error prop.
Base don Himanshu answer.
There is no need to set false, that's the default value for success and error.
Additionally, you can also can also use conditions to change de icon!
<InputGroup
iconRight
success={this.state.inputSuccess}
error={this.state.inputError}>
<Icon name={this.state.inputSuccess ? 'checkmark-circle' : 'close-circle'}/>
<Input placeholder='Textbox'/>
</InputGroup>