Enhancer: Field mask

What

Need to introduce field format.

Why

It’s quite comfortable to have the value entered formatted in the pre-defined way.

How

Field format/template will enforce the provided value to be in the provided format/template. Formatting works onChange and on paste.

Example

Imagine there’s a cardNumber field for entering your credit card’s number. It’s great to have the value be 4 digits separated with spaces while the user types.

<Field.Input
  name="cardNumber"
  format="#### #### #### ####"
  required />

This will enforce the given format while user types.

Specification

1. Field should behave as templated whenever it has a format prop.
2. Field formatting happens onChange and onBlur to ensure it’s strictly followed.
3. The core functionality for field formatting is a pure function (formatField({ fieldProps }) for example). It should have nothing to do with the form, its context, or whatsoever. Takes props and ensures that the value is in the proper format.
4. A char # is used as a placeholder for an actual entered value. Therefore, an expected format of format (lol) is ###-###-###, for example. # are then substituted by the actual field value.
5. Format should be ensure when the field mounts (registers in the form). This way initial values are formatted as well.
6. (Optional) Maybe we should think of situations when the end developer will not supply the whole format, but its beginning only?

Test scenarios

1. Credit card number: #### #### #### ####
2. Phone number: +(###) ### ### ###
3. Birth date: ##/##/####

[Vidlec]

We can use custom “mask” string. Consider: passing XXX{-}XXX{-}XX will add dashes like this: 082-233-22

[kettanaito]

Hello, @aazcast.

No, this feature has been agreed to be too specific for a form to handle. We were working on introduction of granular field lifecycle methods in createField API. The API is released and stable, so you should use it instead.

It should be possible to implement a value masking as follows (pseudo code):

import React from 'react'
import { createField, fieldPresets } from 'react-advanced-form'

const Input = (props) => {
  const { fieldProps } = props
  return <input {...fieldProps} />
}

export default createField({
  // include default "input" preset to support default input props propagation
  // (i.e. "accept", "multiple", "maxLength", etc.)
  ...fieldPresets.input,

  // below provide custom field properties to implement a masking feature:

  // use "mapValue"
  // https://redd.gitbook.io/react-advanced-form/hoc/create-field/options#mapvalue
  // to alter the value of a field in its initial state and upon any interactions
  mapValue: (value) => {
    // return a masked string. you would have to implement "maskValue" yourself
    // depending on your needs.
    // example: maskValue('123456') // 123-456
    return maskValue(value)
  },
})(Input)

You may also want to use assertValue to prevent treating chunks of a mask as an actual value. Imagine you always append + (123) via mask to the actual value. Then you don’t want for + (123) to be considered as a field having value. assertValue can help you to account for that if you return false conditionally.

Let me know if this answers your question.