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>
Related
I have a form where I'd like to validate with the color and behavior of the Semantic UI React in cases when the user not type the pattern that I had defined.
In the image, after the user type something, the message is gone, as expected.
But I also would like to implement one "pattern" as only numbers, etc, for instance with the same color and style of the Semantic UI React lib.
It is possible to do it? I know the html default one it is not the most pretty and recommended form image example
<InputContainer>
{isCheckedContato === 'contato' && (
<>
<span>Falar com:</span>
<Form.Input
data-testid='inputContato'
id='nome'
name='nome'
{...fieldProps('nome')}
style={
{ marginTop: '10px' }
}
width={7}
disabled={isLoading}
error={isCheckedContato === 'contato' ? values.nome ? false : 'Por favor preencha o campo' : false}
fluid
/>
</>
)}
</InputContainer>
I have a form input field that displays an error if the user tries to submit while empty, but I also want to show a different error message is the input is not unique, I currently have this
<FormTextField
className={classes.nameInput}
errorMessages={[handleErrorMessage()]}
label="Recipe Name"
id="recipe-name"
isRequired
name="name"
onChange={handleChange}
placeholder="Recipe name"
validators={['required']}
value={slug}
autoFocus
/>
This is MUI v4
first solution:
you can use snackbar that found in material ui document:
https://v4.mui.com/components/snackbars/
and u can put one or more than one message
second solution:
maybe this post will help u, It is very close to your question:
https://stackoverflow.com/questions/49421792/how-to-use-material-uinext-textfield-error-props
you can put like this example:
<TextField
value={this.state.text}
onChange={event => this.setState({ text: event.target.value })}
error={text === ""}
helperText={text === "" ? 'Empty field!' : ' '}
/>
How can I serialize a form whose data structute is different to it's name.
For example, I have following form, which is getting numberofItems from inventory object and displaying in a TextArea.
<Form
enableReinitialize={true}
initialValues={{
numberofItems: inventories.numberofItems
}}
onSubmit={handleSubmit}
>
<FormItem
name={'numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>
This works fine when rendering the form. But when I try to post the form, the expected property is null. Because, the service expects inventories.numberofItems where as I am sending numberofItems , as per it's name.
I can avoid this by doing passing the object to form and extracting each field to control.
<Form
enableReinitialize={true}
initialValues={{
inventories: inventories
}}
onSubmit={handleSubmit}
>
<FormItem
name={'inventories.numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
</Form>
But is there a way I can serialize a control, with a different key from it's name.
In my case, I want to serialize the form with inventories.numberofItems while keeping the name of the control as numberofItems.
<FormItem
name={'numberofItems'}
label={'Current Stock'}
maxLength={32000}
>
{inputProps => <TextArea {...inputProps} />}
</FormItem>
What you can do in order to successfully submit the form (I don't know if it fits your needs though, this is what I do in similar cases in my code where I have JAX-RS backend which cannot map to unknown properties of object) is set the required property and delete the one that cannot be submitted.
function handleSubmit(myFormObject) {
myFormObject.inventories = {numberofItems: myFormObject.numberofItems}
delete myFormObject.numberofItems
.
.
.
}
redux-form supports such cases though. You can define a Field with property name being a "compound" one and it will properly map to your form object being submitted.
Check this sample codesandbox
<Field name="test.notes" component="textarea" />
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.
I have a bit of a weird question but so far I did not find this question being asked somewhere.
If I try to render a classname conditionally with jsx I'd do something like this:
<input
{...input}
type={type}
className="form__input"
classname={boolean ? "boo" : null}
/>
With a boolean attribute like "disabled" this does not seem to work. E. g.:
<input
{...input}
type={type}
className="form__input"
{disabled ? "disabled" : null}
/>
This seems logical since I don't want to insert a string as an jsx attribute. But Is there really no other way than rendering the entire jsx tag conditionally?
if (boolean) { <input disabled />} } else { <input /> }
disabled is not HTML attribute but JSX prop. They are intended to be used conveniently with JavaScript expressions.
disabled prop with no value is the same as disabled={true}, while disabled={false} prop will result in disabled attribute not being added.
Considering that disabled variable is boolean, it should be:
<input
{...input}
type={type}
className="form__input"
disabled={disabled}
/>
As Federkun indicated in the comments, you can just do:
<input
{...input}
type={type}
className="form__input"
disabled={disabled}
/>
If the boolean is true, the attribute will be included as a bare attribute. If it is false the attribute will not be included.
You can see the discussion of enhancing JSX to support this behavior back in 2014 here:
https://github.com/facebook/react/issues/961