ant-design-vue 之form表单使用

ant-design-vue 之form表单使用

主要代码: v-decorator, setFieldsValue, getFieldsValue, resetFields, validateFields

                this.form.setFieldsValue({"username":['username_ddddd'],"nickname":['nickname_ddddd']}); //设置值

                this.form.getFieldsValue();// 获取所有值
                this.form.getFieldsValue(['username','nickname']); // 获取某一个值
                
                this.form.resetFields();  // 重置表单值
                
                this.form.validateFields(err => {  // 校验所有的值
                    if (!err) {
                        console.info('success');
                    }else {
                        console.log(err);
                    }
                });
                
                this.form.validateFields(['nickname'],(err)=>{ // 校验某个值
                    if (!err) {
                        console.log('success');
                    }else {
                        console.log(err);
                    }
                });

demo 练习

<template>
    <div>
        <a-form :form="form">
            
            <a-form-item label="Name">
                <a-input placeholder="Please input your name"
                        v-decorator="username" />
            </a-form-item>
            
            <a-form-item  label="Nickname">
                <a-input  placeholder="Please input your nickname" 
                          v-decorator="['nickname',{ rules: [{ required: true, message: 'Please input your nickname' }] },]"/>
            </a-form-item>
            
            <button @click="fei_form">form功能测试</button>
        </a-form>
    </div>
</template>
<script>
    
    /* 这是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //这是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 这是ant-design-vue */


    export default {
        data() {
            return {
                form: this.$form.createForm(this, { name: 'form_rule' }), // 定义form
                username: ['username', {rules: [{required: true, message: 'Please input your username'}]}]
            }
        },
        methods: {

            fei_form() {
                
                this.form.setFieldsValue({"username":['username_ddddd'],"nickname":['nickname_ddddd']}); //设置值
                
                this.form.getFieldsValue();// 获取所有值
                this.form.getFieldsValue(['username','nickname']); // 获取某一个值
                
                this.form.resetFields();  // 重置表单值
                
                this.form.validateFields(err => {  // 校验所有的值
                    if (!err) {
                        console.info('success');
                    }else {
                        console.log(err);
                    }
                });
                
                this.form.validateFields(['nickname'],(err)=>{ // 校验某个值
                    if (!err) {
                        console.log('success');
                    }else {
                        console.log(err);
                    }
                });
                
            }
        },
        watch: {

        },
    };
</script>

<style scoped>

</style>

Form 表单