【Vue 开发实战】实战篇 # 38：表单初始数据、自动校验、动态赋值

export function antDecorator(Vue) {
  return Vue.directive('decorator', {});
}
export default {
  // just for tag
  install: Vue => {
    antDecorator(Vue);
  },
};

<template>
    <a-form :layout="formLayout" :form="form">
        <a-form-item
            label="Form Layout"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
        >
            <a-radio-group
                default-value="horizontal"
                @change="handleFormLayoutChange"
            >
                <a-radio-button value="horizontal"> Horizontal </a-radio-button>
                <a-radio-button value="vertical"> Vertical </a-radio-button>
                <a-radio-button value="inline"> Inline </a-radio-button>
            </a-radio-group>
        </a-form-item>
        <a-form-item
            label="Field A"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
        >
            <a-input v-decorator="[
                'fieldA',
                {
                    initialValue: fieldA,
                    rules: [
                        {
                            required: true,
                            min: 6,
                            message: '必须大于5个字符'
                        }
                    ]
                },
            ]" placeholder="input placeholder" />
        </a-form-item>
        <a-form-item
            label="Field B"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
        >
            <a-input v-decorator="['fieldB']" placeholder="input placeholder" />
        </a-form-item>
        <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <a-button type="primary" @click="handleSubmit"> Submit </a-button>
        </a-form-item>
    </a-form>
</template>
<script>
export default {
    data() {
        this.form = this.$form.createForm(this);
        return {
            formLayout: "horizontal",
            fieldA: "hello kaimo",
            fieldB: "",
        };
    },
    computed: {
        formItemLayout() {
            const { formLayout } = this;
            return formLayout === "horizontal"
                ? {
                      labelCol: { span: 4 },
                      wrapperCol: { span: 14 },
                  }
                : {};
        },
        buttonItemLayout() {
            const { formLayout } = this;
            return formLayout === "horizontal"
                ? {
                      wrapperCol: { span: 14, offset: 4 },
                  }
                : {};
        },
    },
    mounted() {
        // 动态赋值
        setTimeout(() => {
            this.form.setFieldsValue({
                fieldB: "kaimo313"
            })
        }, 2000)
    },
    methods: {
        handleFormLayoutChange(e) {
            this.formLayout = e.target.value;
        },
        handleSubmit() {
            // 自动校验
            this.form.validateFields((err, values) => {
                console.log(err, values)
                if(!err) {
                    console.log(values);
                }
            })
        },
    },
};
</script>