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

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

import createDOMForm from '../src/createDOMForm';
import { DatePicker, Select } from 'ant-design-vue';
import { regionStyle, errorStyle } from './styles';
const { Option } = Select;

const Email = {
  props: {
    form: Object,
  },
  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form;
    const errors = getFieldError('email');
    return (
      <div style={regionStyle}>
        <div>email sync validate</div>
        <div>
          <input
            {...getFieldProps('email', {
              initialValue: '',
              rules: [{ type: 'email', message: <b key="err">错误的 email 格式</b> }],
            })}
          />
        </div>
        <div style={errorStyle}>{errors}</div>
        <div style={errorStyle}>{isFieldValidating('email') ? 'validating' : null}</div>
      </div>
    );
  },
};

const User = {
  props: {
    form: Object,
  },
  methods: {
    userExists(rule, value, callback) {
      setTimeout(() => {
        if (value === '1') {
          callback([new Error('are you kidding?')]);
        } else if (value === 'yiminghe') {
          callback([new Error('forbid yiminghe')]);
        } else {
          callback();
        }
      }, 300);
    },
  },

  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form;
    const errors = getFieldError('user');
    return (
      <div style={regionStyle}>
        <div>
          <span
            style={{
              color: 'red',
            }}
          >
            *
          </span>
          user async validate
        </div>
        <div>
          <input
            {...getFieldProps('user', {
              initialValue: '',
              validateFirst: true,
              rules: [{ required: true }, { validator: this.userExists }],
            })}
          />
        </div>
        <div style={errorStyle}>{errors ? errors.join(',') : null}</div>
        <div style={errorStyle}>{isFieldValidating('user') ? 'validating' : null}</div>
      </div>
    );
  },
};

const CustomInput = {
  props: {
    form: Object,
  },
  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form;
    const errors = getFieldError('select');
    return (
      <div style={regionStyle}>
        <div>
          <span
            style={{
              color: 'red',
            }}
          >
            *
          </span>
          custom select sync validate
        </div>
        <div>
          <Select
            placeholder="please select"
            style={{
              width: '200px',
            }}
            {...getFieldProps('select', { rules: [{ required: true }] })}
          >
            <Option value="1">1</Option>
            <Option value="2">2</Option>
          </Select>
        </div>
        <div style={errorStyle}>{errors ? errors.join(',') : null}</div>
        <div style={errorStyle}>{isFieldValidating('select') ? 'validating' : null}</div>
      </div>
    );
  },
};

const DateInput = {
  props: {
    form: Object,
  },
  render() {
    const { getFieldProps, getFieldError } = this.form;
    const errors = getFieldError('date');
    return (
      <div style={regionStyle}>
        <div>
          <span
            style={{
              color: 'red',
            }}
          >
            *
          </span>
          DateInput sync validate
        </div>
        <div
          style={{
            width: '200px',
          }}
        >
          <DatePicker
            placeholder="please select"
            {...getFieldProps('date', { rules: [{ required: true, type: 'object' }] })}
          />
        </div>
        <div style={errorStyle}>{errors ? errors.join(',') : null}</div>
      </div>
    );
  },
};

function toNumber(v) {
  if (v === undefined) {
    return v;
  }
  if (v === '') {
    return undefined;
  }
  if (v && v.trim() === '') {
    return NaN;
  }
  return Number(v);
}

const NumberInput = {
  props: {
    form: Object,
  },
  render() {
    const { getFieldProps, getFieldError } = this.form;
    const errors = getFieldError('number');
    return (
      <div style={regionStyle}>
        <div>number input</div>
        <div>
          <input
            {...getFieldProps('number', {
              initialValue: '1',
              rules: [{ transform: toNumber, type: 'number' }],
            })}
          />
        </div>
        <div style={errorStyle}>{errors ? errors.join(',') : null}</div>
      </div>
    );
  },
};

const Form = {
  methods: {
    onSubmit(e) {
      console.log('submit');
      e.preventDefault();
      this.form.validateFieldsAndScroll(
        {
          scroll: {
            offsetTop: 20,
          },
        },
        (error, values) => {
          if (!error) {
            console.log('ok', values);
          } else {
            console.log('error', error, values);
          }
        },
      );
    },

    reset(e) {
      e.preventDefault();
      this.form.resetFields();
    },
  },

  render() {
    const { form } = this;
    const { getFieldProps, getFieldError } = form;
    return (
      <div
        style={{
          margin: '20px',
        }}
      >
        <h2>overview</h2>
        <form onSubmit={this.onSubmit}>
          <User form={form} saveRef={this.saveRef} />

          <NumberInput form={form} />

          <Email form={form} />

          <CustomInput form={form} />

          <DateInput form={form} />

          <div style={regionStyle}>
            <div>normal required input</div>
            <div>
              <input
                {...getFieldProps('normal', { initialValue: '', rules: [{ required: true }] })}
              />
            </div>
            <div style={errorStyle}>
              {getFieldError('normal') ? getFieldError('normal').join(',') : null}
            </div>
          </div>

          <div style={regionStyle}>
            <button onClick={this.reset}>reset</button>
            &nbsp;
            <input type="submit" value="submit" />
          </div>
        </form>
      </div>
    );
  },
};

export default createDOMForm({
  validateMessages: {
    required(field) {
      return `${field} 必填`;
    },
  },
})(Form);