ant-design-vue/components/vc-form/demo/async-init.js

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

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

const Email = {
  props: {
    form: Object,
  },
  methods: {
    checkSpecial(rule, value, callback) {
      setTimeout(() => {
        if (value === 'yiminghe@gmail.com') {
          callback('can not be!');
        } else {
          callback();
        }
      }, 1000);
    },
  },

  render() {
    const { getFieldProps, getFieldError, isFieldValidating } = this.form;
    const errors = getFieldError('email');
    return (
      <div style={regionStyle}>
        <div>email validate onBlur</div>
        <div>
          <input
            {...getFieldProps('email', {
              initialValue: '',
              validateFirst: true,
              rules: [
                {
                  required: true,
                },
                {
                  type: 'email',
                  message: '错误的 email 格式',
                },
                this.checkSpecial,
              ],
              validateTrigger: 'blur',
            })}
          />
        </div>
        <div style={errorStyle}>{errors ? errors.join(',') : null}</div>
        <div style={errorStyle}>{isFieldValidating('email') ? 'validating' : null}</div>
      </div>
    );
  },
};

const Form = {
  mixins: [BaseMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      loading: true,
    };
  },

  mounted() {
    setTimeout(() => {
      this.setState(
        {
          loading: false,
        },
        () => {
          setTimeout(() => {
            this.form.setFieldsInitialValue({
              email: 'xx@gmail.com',
            });
          }, 1000);
        },
      );
    }, 1000);
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.form.submit(callback => {
        setTimeout(() => {
          this.form.validateFields((error, values) => {
            if (!error) {
              console.log('ok', values);
            } else {
              console.log('error', error, values);
            }
            callback();
          });
        }, 1000);
      });
    },

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

  render() {
    if (this.loading) {
      return <b>loading</b>;
    }
    const { form } = this;
    const disabled = form.isFieldsValidating() || form.isSubmitting();
    return (
      <div style={{ margin: 20 }}>
        <h2>async init field</h2>
        <form onSubmit={this.onSubmit}>
          <Email form={form} />

          <div style={regionStyle}>
            <button disabled={disabled} type="submit">
              submit
            </button>
            &nbsp;{disabled ? <span style={{ color: 'red' }}>disabled</span> : null}&nbsp;
            <button disabled={disabled} onClick={this.reset}>
              reset
            </button>
          </div>
        </form>
      </div>
    );
  },
};

export default createForm()(Form);