Normalizing

Values can be normalized by specifying normalizers as an option to dripForm().
See Built-in Normalizers for Normalizer which can be specified.

Please note that there is a problem that the cursor position shifts if there is a change in the value of Controlled Component in React.

Example:

Values:

{}

Sample Code:

import React from 'react';
import { dripForm } from 'react-drip-form';
import { Input, Select } from 'react-drip-form-components';

const NormalizingForm = dripForm({
  validations: {
    product: {
      required: true,
    },
    minAmount: {
      required: true,
    },
    maxAmount: {
      required: true,
    },
  },
  normalizers: {
    minAmount: {
      toInt: true,
      min: 0,
      maxWith: 'maxAmount',
    },
    maxAmount: {
      toInt: true,
      max: 5000,
      minWith: 'minAmount',
    },
  },
})(({
  handlers,
  meta: { invalid, pristine },
}) => (
  <form onSubmit={handlers.onSubmit}>
    <div>
      <label htmlFor="product">Product</label>
      <Select
        id="product"
        name="product"
        label="Product"
      >
        <option value="">Select product</option>
        <option value="product1">Product 1</option>
        <option value="product2">Product 2</option>
        <option value="product3">Product 3</option>
      </Select>
    </div>

    <div className="row">
      <div className="col-xs-6">
        <label htmlFor="minAmount">Minimum amount</label>
        <Input
          type="number"
          id="minAmount"
          name="minAmount"
          label="Minimum amount"
          value={0}
        />
      </div>

      <div className="col-xs-6">
        <label htmlFor="minAmount">Maximum amount</label>
        <Input
          type="number"
          id="maxAmount"
          name="maxAmount"
          label="maximum amount"
          value={1000}
        />
      </div>
    </div>

    <Button
      primary
      onClick={handlers.onSubmit}
      disabled={invalid || pristine}
    >
      Submit
    </Button>
  </form>
));