Redux-form example with normalize and format
import React from 'react'; | |
import { reduxForm, Field } from 'redux-form'; | |
import { ScrollView, Text, TouchableOpacity } from 'react-native'; | |
import moment from 'moment'; | |
import MyTextInput from './MyTextInput'; | |
/** | |
* Automatically adds the dashes required by the specified phone format and limits the input to ten characters | |
*/ | |
const phoneFormatter = (number) => { | |
if (!number) return ''; | |
// NNN-NNN-NNNN | |
const splitter = /.{1,3}/g; | |
number = number.substring(0, 10); | |
return number.substring(0, 7).match(splitter).join('-') + number.substring(7); | |
}; | |
/** | |
* Remove dashes added by the formatter. We want to store phones as plain numbers | |
*/ | |
const phoneParser = (number) => number ? number.replace(/-/g, '') : ''; | |
/** | |
* Force after min date | |
*/ | |
const maxDateNormalize = (value, previousValue, values) => { | |
const momentMinDate = moment(values.minDate, 'MM-DD-YYYY', true); | |
const momentMaxDate = moment(value, 'MM-DD-YYYY', true); | |
if (!momentMinDate.isValid() || !momentMaxDate.isValid()) { | |
return value; | |
} | |
if (!momentMaxDate.isAfter(momentMinDate)) { | |
return momentMinDate.add(1, 'd').format('MM-DD-YYYY'); | |
} | |
return value; | |
}; | |
/** | |
* Force before max date | |
*/ | |
const minDateNormalize = (value, previousValue, values) => { | |
const momentMaxDate = moment(values.maxDate, 'MM-DD-YYYY', true); | |
const momentMinDate = moment(value, 'MM-DD-YYYY', true); | |
if (!momentMinDate.isValid() || !momentMaxDate.isValid()) { | |
return value; | |
} | |
if (!momentMinDate.isBefore(momentMaxDate)) { | |
return momentMaxDate.subtract(1, 'd').format('MM-DD-YYYY'); | |
} | |
return value; | |
}; | |
function MyForm(props) { | |
return ( | |
<ScrollView keyboardShouldPersistTaps={'handled'}> | |
<Text>Phone number</Text> | |
<Field | |
name={'phoneNumber'} | |
component={MyTextInput} | |
placeholder={'NNN-NNN-NNNN'} | |
format={phoneFormatter} | |
parse={phoneParser} | |
/> | |
<Text>Min date</Text> | |
<Field | |
name={'minDate'} | |
component={MyTextInput} | |
placeholder={'MM-DD-YYYY'} | |
normalize={minDateNormalize} | |
/> | |
<Text>Max date</Text> | |
<Field | |
name={'maxDate'} | |
component={MyTextInput} | |
placeholder={'MM-DD-YYYY'} | |
normalize={maxDateNormalize} | |
/> | |
<TouchableOpacity onPress={props.handleSubmit}> | |
<Text>Submit!</Text> | |
</TouchableOpacity> | |
</ScrollView> | |
); | |
} | |
export default reduxForm({ | |
form: 'signIn' | |
})(MyForm); |
This comment has been minimized.
This comment has been minimized.
@puzant looks like you left off the end parenthesis after |
This comment has been minimized.
This comment has been minimized.
As @elevine-r7 mentioned, the syntax is incorrect. Apart from that, to add ad-hoc params to the normalize function you could: <Field
name={'maxDate'}
component={MyTextInput}
placeholder={'MM-DD-YYYY'}
normalize={(...args) => maxDateNormalize("my custom param", ...args)}
/> Then update maxDateNormalize to reflect the new params. |
This comment has been minimized.
This comment has been minimized.
@elevine-r7 yeah that was a silly mistake from my side thank you for pointing it out |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Hello, what if I want to pass a parameter to the normalize function like this
it keeps throwing error
normalize is undefined