Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@puzant

This comment has been minimized.

Copy link

@puzant puzant commented Sep 29, 2020

Hello, what if I want to pass a parameter to the normalize function like this

normalize={inputValue(fieldName}

it keeps throwing error normalize is undefined

@elevine-r7

This comment has been minimized.

Copy link

@elevine-r7 elevine-r7 commented Jan 28, 2021

@puzant looks like you left off the end parenthesis after fieldName

@sbalay

This comment has been minimized.

Copy link
Owner Author

@sbalay sbalay commented Jan 28, 2021

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.

@puzant

This comment has been minimized.

Copy link

@puzant puzant commented Jan 28, 2021

@elevine-r7 yeah that was a silly mistake from my side thank you for pointing it out
@sbalay thank you for suggestion I'll try that as well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment