Need to style red for * to show that its required field (in label)
<TextInput
mode="flat"
ref={formFilledByRef}
label={"Form filled by*"}
style={styles.inputField}
returnKeyType={'send'}
value={state.form_filled_by.value}
error={state.form_filled_by.error !== undefined}
onSubmitEditing={}
onChange={e => {
handleOnChange()
/>
Related
I have this code in my React Native app that renders a list of types. Selected and not selected types have different backgrounds. Is it okay to make accessibility label text conditional?
<View style={styles.typesList}>
{types.map(type => {
return (
<TouchableOpacity
key={type}
style={[
styles.type,
{
backgroundColor: filterTypes.includes(type)
? Colors.white
: Colors.lightYellow
}
]}
onPress={() => {
handleFilterTypesChange(type);
}}
testID='type'
accessibilityLabel={`${
filterTypes.includes(type) ? 'Unselect' : 'Select'
} ${type} filter`}
>
<Text>{type}</Text>
</TouchableOpacity>
);
})}
</View>
The screen readers by default read-out if a checkbox is selected or not. So no need to put conditional text to just read out it. If you have multiple select boxes it is advised to use fieldsel and legend which will give details to visually challenged persons.
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label><br>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label><br>
</fieldset>
The contains the group of checkboxes, and the labels the group. Screen readers may repeat the legend for each control in the group, so the legend text should be brief and descriptive.
I am working on react native application where using Formik and Yup for forms. I want to update one state value depending on the form's value while submitting a form.
Issue Description::
It works fine if there is no validation error, but there is one address field and depending on that field I have added a hidden field "zipcode". I want to show zipcode input text field if my address is empty.
Code::
const validationSchema = Yup.object().shape({
address: Yup.string()
.required('Address should not be empty'),
zipcode: Yup.string()
.required(errMgs.emptyText)
.matches(regExp, errMgs.specialCharNotAllowed),
apt: Yup.string()
.matches(regExp, errMgs.specialCharNotAllowed)
});
Inside render function::
<Formik
initialValues={this.initialValues}
onSubmit={(data) => this.onSubmitForm(data)}
ref={el => (this.form = el)}
validationSchema={validationSchema}
render={({ handleSubmit, values, setValues, setFieldValue, errors, touched, ...props }) => {
return (
<Form>
<GooglePlacesInput
onPress={(data, detail) => this.onPressOfAddress(data, detail)}
address={values.address}
name="address"
onChangeText={(value) => setFieldValue('address', value)}
/>
{errors.address && touched.address && <ErrorText message={errors.address} />}
{isZipCode &&
<>
<TextInput placeholder="Zipcode" textContentType="postalCode" name="zipcode" type="text" onValueChange={(value) => this.onChangeZipcode(value)} />
{errors.zipcode && touched.zipcode && <ErrorText message={errors.address} />}
</>
}
<TextInput placeholder="apt" textContentType="streetAddressLine1" name="apt" type="text" onValueChange={(value) => setFieldValue('apt', value)} />
<Button onPress={handleSubmit} block large variant="success">SAVE</Button>
<Button onPress={() => popScreen(this.props.componentId)} block large variant="danger">CANCEL</Button>
</Form>
);
}}
/>
I want to show zip code input with error when my address is empty on submission, means when there is a validation error in the form. How can I do this?
I want to show zipcode input text field if my address is empty.
You can have 2 cases:
1 - Check for address errors and only display the zipCode if address is not valid
To do that, you should get the error of the address field.
Instead of {isZipCode && (...)} you should do {errors.address && touched.address && (...)}, which is when the adress field is empty.
2 - After the first submit, if address is not valid, always show zipCode
Other solution is to manually trigger validation with validateForm the will come from the render function.
e.g.
<button type="button" onClick={() => validateForm().then(() => {
console.log('Check for errors and Update State of isZipCode')
})}>
Submit Button
</button>
You can also validate only one field with validateField('fieldName'), so maybe only check for address and set the state depending on the errors.
Using:
redux-form#7.3.0
<Field
component={({ input: { onChange }}) => <TextInput onChangeText={onChange} />}
name=‘truncate’
normalize={(value) => value && value.toString().slice(0,2) || ''}
/>
When typing into this truncated field, the values displayed are not truncated. I can keep typing past the first two characters and seeing the output.
I see only the first two characters in the truncate field value when submitting the surrounding form.
Why would the visible output not be truncated prevent more input?
Based on Charles response below, I also tried the telephone number example shown on the redux-form example page; the output is not normalized.
Attempting to recreate the telephone normalization shown from the example ends up with the same results - no normalization on the field displayed:
https://redux-form.com/7.3.0/examples/normalizing/
You can remove your usage of the normalize prop, and apply the maxLength prop to your TextInput.
Example:
<Field
component={({ input: { onChange }}) => <TextInput onChangeText={onChange} maxLength={2} />}
name="truncate"
/>
Alternatively, you can try passing along the remaining input props to your TextInput.
Example:
<Field
component={({ input: { onChange, ...remainingProps }}) => <TextInput onChangeText={onChange} {...remainingProps} />}
name="truncate"
normalize={value => value && value.slice(0, 2)}
/>
I have one text input in which i'm gonna typing some name while user typing the name get translated and back to set in text Input field how can i do this
<TextInput
style={{color:'black',width:width-60, borderColor: 'black'}}
underlineColorAndroid='black'
placeholderTextColor="black"
onChangeText={ (textValue) => this.setState({
input: textValue}) }
/>
// TRANSLATED TEXT
<PowerTranslator
text={this.state.input} />
TextInput have prop named "value".
For setting data to text input, you should set "value" to state value.
<TextInput
value={this.props.input}
/>
https://facebook.github.io/react-native/docs/textinput.html#value
In your code, power translator view component only for displaying text.
If you look at this component page, you should use it as service for getting translated text.
Translation.get('Engineering physics or engineering science').then(translated => {
//Do something with the translated text });
Hi in my componentWillMount I set my states like this
componentWillMount(){
this.timeSheetData().then((timeSheetResponse)=>{
this.setState({comments:timeSheetResponse.comments});
this.setState({spentHours:parseInt(timeSheetResponse.hours)});
alert(this.state.spentHours);
});
});
In my view
I have the TextInput like this. I can't display the value on the TextInput but I can display the value on Text I don't know why it's happening
<TextInput keyboardType='numeric' onChangeText={(spentHours) =>this.setState({spentHours})}
value={this.state.spentHours} />
Input values need to be strings so you either need to remove parseInt in your componentWillMount method:
this.setState({ spentHours: timeSheetResponse.hours });
or in your template you need to convert the input value to a string with toString():
<TextInput
keyboardType='numeric'
onChangeText={spentHours => this.setState({ spentHours })}
value={this.state.spentHours.toString()}
/>