Field Normalizing Example

When you need to put some control between what the user enters and the value that gets stored in Redux, you can use a "normalizer". A normalizer is just a function that gets run every time a value is changed that can transform the value before storing.

One common use case is when you need a value to be in a certain format, like a phone number or a credit card.

Normalizers are passed four parameters:

• value - The value of the field on which you have placed the normalizer
• previousValue - The value of the field on which you have placed the normalizer before the most recent change
• allValues - All the values in the form, with the current field value set
• previousAllValues - All the values in the form before the current field is changed

This allows you to do things like restrict one field value based on the value of another field, like the min and max fields in the example below. Notice that you cannot set min to be greater than max, and you cannot set max to be less than min.

Values

{
  "min": 1,
  "max": 10
}

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import normalizePhone from './normalizePhone'

const upper = value => value && value.toUpperCase()
const lower = value => value && value.toLowerCase()
const lessThan = otherField =>
  (value, previousValue, allValues) => value < allValues[otherField] ? value : previousValue
const greaterThan = otherField =>
  (value, previousValue, allValues) => value > allValues[otherField] ? value : previousValue

const FieldNormalizingForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username</label>
        <div>
          <Field
            name="username"
            component="input"
            type="text"
            placeholder="Username"
            normalize={lower}
          />
        </div>
      </div>
      <div>
        <label>Shout</label>
        <div>
          <Field
            name="shout"
            component="input"
            type="text"
            placeholder="Shout something!"
            normalize={upper}
          />
        </div>
      </div>
      <div>
        <label>Phone</label>
        <div>
          <Field
            name="phone"
            component="input"
            type="text"
            placeholder="Phone Number"
            normalize={normalizePhone}
          />
        </div>
      </div>
      <div>
        <label>Min</label>
        <div>
          <Field
            name="min"
            component="input"
            type="number"
            normalize={lessThan('max')}
          />
        </div>
      </div>
      <div>
        <label>Max</label>
        <div>
          <Field
            name="max"
            component="input"
            type="number"
            normalize={greaterThan('min')}
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'normalizing', // a unique identifier for this form
  initialValues: { min: 1, max: 10 }
})(FieldNormalizingForm)

const normalizePhone = (value, previousValue) => {
  if (!value) {
    return value
  }
  const onlyNums = value.replace(/[^\d]/g, '')
  if (!previousValue || value.length > previousValue.length) {
    // typing forward
    if (onlyNums.length === 3) {
      return onlyNums + '-'
    }
    if (onlyNums.length === 6) {
      return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3) + '-'
    }
  }
  if (onlyNums.length <= 3) {
    return onlyNums
  }
  if (onlyNums.length <= 6) {
    return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3)
  }
  return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3, 6) + '-' + onlyNums.slice(6, 10)
}

export default normalizePhone