ant-design-vue/components/vc-form/demo/normalize.js

/* eslint react/no-multi-comp:0, no-console:0 */

import { createForm } from '../index';
import { regionStyle, errorStyle } from './styles';

const CustomInput = {
  props: {
    form: Object,
  },
  data() {
    return {
      data: [],
    };
  },
  methods: {
    checkUpper(rule, value = '', callback) {
      if (value !== value.toUpperCase()) {
        callback(new Error('need to be upper!'));
      } else {
        callback();
      }
    },
    toUpper(v, prev) {
      if (v === prev) {
        return v;
      }
      return v.toUpperCase();
    },
  },

  render() {
    const { getFieldProps, getFieldError } = this.form;
    const errors = getFieldError('upper');
    return (
      <div style={regionStyle}>
        <div>upper normalize</div>
        <div>
          <input
            {...getFieldProps('upper', {
              normalize: this.toUpper,
              rules: [
                {
                  validator: this.checkUpper,
                },
              ],
            })}
          />
        </div>
        <div style={errorStyle}>{errors ? errors.join(',') : null}</div>
      </div>
    );
  },
};

const MaxMin = {
  props: {
    form: Object,
  },
  methods: {
    normalizeMin(value, prevValue, allValues) {
      console.log('normalizeMin', allValues.min, allValues.max);
      const previousAllValues = this.form.getFieldsValue();
      if (allValues.max !== previousAllValues.max) {
        // max changed
        if (value === '' || Number(allValues.max) < Number(value)) {
          return allValues.max;
        }
      }
      return value;
    },
    normalizeMax(value, prevValue, allValues) {
      console.log('normalizeMax', allValues.min, allValues.max);
      const previousAllValues = this.form.getFieldsValue();
      if (allValues.min !== previousAllValues.min) {
        // min changed
        if (value === '' || Number(allValues.min) > Number(value)) {
          return allValues.min;
        }
      }
      return value;
    },
  },

  render() {
    const { getFieldProps } = this.form;
    return (
      <div style={regionStyle}>
        <div>
          min:{' '}
          <select
            {...getFieldProps('min', {
              normalize: this.normalizeMin,
              initialValue: '',
            })}
          >
            <option value="">empty</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>
        <div>
          max:{' '}
          <select
            {...getFieldProps('max', {
              initialValue: '',
              normalize: this.normalizeMax,
            })}
          >
            <option value="">empty</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>
      </div>
    );
  },
};

const Form = {
  // props: {
  //   form: Object,
  // },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          console.log('ok', values);
        } else {
          console.log('error', error, values);
        }
      });
    },
  },

  render() {
    const { form } = this;
    return (
      <div style={{ margin: '20px' }}>
        <h2>normalize</h2>
        <form onSubmit={this.onSubmit}>
          <CustomInput form={form} />

          <MaxMin form={form} />

          <div style={regionStyle}>
            <button>submit</button>
          </div>
        </form>
      </div>
    );
  },
};

export default createForm()(Form);