ant-design-vue/components/vc-form/demo/nested-field.js

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

import createForm from '../src/createDOMForm';

const Form = {
  props: {
    form: Object,
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      console.log('Values of member[0].name.firstname and a[0][1].b.c[0]');
      console.log(this.form.getFieldsValue(['member[0].name.firstname', 'a[0][1].b.c[0]']));
      console.log('Values of all fields');
      console.log(this.form.getFieldsValue());

      this.form.validateFieldsAndScroll((error, values) => {
        if (!error) {
          console.log('ok', values);
        } else {
          console.log('error', error, values);
        }
      });
    },

    onChange(e) {
      console.log(e.target.value);
    },

    setField() {
      this.form.setFieldsValue({
        member: [
          {
            name: {
              firstname: 'm1 first',
              lastname: 'm1 last',
            },
          },
          {
            name: {
              firstname: 'm2 first',
              lastname: 'm2 last',
            },
          },
        ],
        a: [
          [
            undefined,
            {
              b: {
                c: ['Value of a[0][1].b.c[0]'],
              },
            },
          ],
        ],
        w: {
          x: {
            y: {
              z: ['Value of w.x.y.z[0]'],
            },
          },
        },
      });
    },

    resetFields() {
      console.log('reset');
      this.form.resetFields();
    },
  },

  render() {
    const { getFieldDecorator, getFieldError } = this.form;

    return (
      <form onSubmit={this.onSubmit}>
        <div>Member 0 firstname</div>
        {getFieldDecorator('member[0].name.firstname', {
          initialValue: '',
          rules: [
            {
              required: true,
              message: "What's the member_0 firstname?",
            },
          ],
        })(<input onInput={this.onChange} />)}
        <div style={{ color: 'red' }}>
          {(getFieldError('member[0].name.firstname') || []).join(', ')}
        </div>

        <div>Member 0 lastname</div>
        {getFieldDecorator('member[0].name.lastname', {
          initialValue: '',
          rules: [
            {
              required: true,
              message: "What's the member_0 lastname?",
            },
          ],
        })(<input onInput={this.onChange} />)}
        <div style={{ color: 'red' }}>
          {(getFieldError('member[0].name.firstname') || []).join(', ')}
        </div>

        <div>Member 1 firstname</div>
        {getFieldDecorator('member[1].name.firstname', {
          initialValue: '',
          rules: [
            {
              required: true,
              message: "What's the member_1 fistname?",
            },
          ],
        })(<input onInput={this.onChange} />)}
        <div style={{ color: 'red' }}>
          {(getFieldError('member[1].name.firstname') || []).join(', ')}
        </div>

        <div>Member 1 lastname</div>
        {getFieldDecorator('member[1].name.lastname', {
          initialValue: '',
          rules: [
            {
              required: true,
              message: "What's the member_1 lastname?",
            },
          ],
        })(<input onInput={this.onChange} />)}
        <div style={{ color: 'red' }}>
          {(getFieldError('member[1].name.firstname') || []).join(', ')}
        </div>

        <div>a[0][1].b.c[0]</div>
        {getFieldDecorator('a[0][1].b.c[0]', {
          initialValue: '',
          rules: [
            {
              required: true,
              message: "What's a[0][1].b.c[0]?",
            },
          ],
        })(<input onInput={this.onChange} />)}
        <div style={{ color: 'red' }}>{(getFieldError('a[0][1].b.c[0]') || []).join(', ')}</div>

        <div>w.x.y.z[0]</div>
        {getFieldDecorator('w.x.y.z[0]', {
          initialValue: '',
          rules: [
            {
              required: true,
              message: "What's w.x.y.z[0]?",
            },
          ],
        })(<input onInput={this.onChange} />)}
        <div style={{ color: 'red' }}>{(getFieldError('w.x.y.z[0]') || []).join(', ')}</div>

        <button onClick={this.setField}>Set field</button>
        <button onClick={this.resetFields}>Reset fields</button>
        <button>Submit</button>
      </form>
    );
  },
};

const NewForm = createForm({
  onFieldsChange(_, changedFields, allFields) {
    console.log('onFieldsChange: ', changedFields, allFields);
  },
  onValuesChange(_, changedValues, allValues) {
    console.log('onValuesChange: ', changedValues, allValues);
  },
})(Form);

export default {
  render() {
    return (
      <div>
        <h2>setFieldsValue</h2>
        <NewForm />
      </div>
    );
  },
};