ant-design-vue 之form表單使用

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

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

this.form.getFieldsValue();// 獲取所有值
this.form.getFieldsValue(['username','nickname']); // 獲取某一個值

this.form.resetFields();  // 重置表單值

this.form.validateFields((err,fieldsValue) => {  // 校驗所有的值
  if (!err) {
    console.log(fieldsValue); //獲取數據 {nickname: "實際值", username: "實際值"}
  }else {
    console.log(err);
  }
});

this.form.validateFields(['nickname'],(err,fieldsValue)=>{ // 校驗某個值
  if (!err) {
    console.log(fieldsValue); //獲取數據 {nickname: "實際值"}
  }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,fieldsValue) => {  // 校驗所有的值
                if (!err) {
                    console.log(fieldsValue); //獲取數據 {nickname: "實際值", username: "實際值"}
                }else {
                    console.log(err);
                }
            });

            this.form.validateFields(['nickname'],(err,fieldsValue)=>{ // 校驗某個值
                if (!err) {
                    console.log(fieldsValue); //獲取數據  {nickname: "實際值"}
                }else {
                    console.log(err);
                }
            });

        }
    },
    watch: {

    },
};
</script>

<style scoped>

</style>

setFields 設置一組輸入控件的值與錯誤狀態 

this.form.setFields({
    "username": {
        value: "xxx_可以給一個默認值",
        errors: [{"message": "請選擇輸入用戶名"}]
    }
});

 

長度校驗

export default {
    data() {
        return {
            form: this.$form.createForm(this, { name: 'form_rule' }), // 定義form
            // username: ['username', {rules: [{required: true, message: 'Please input your username'}]}],
            username: ['username', {
                initialValue: '', // 默認值
                rules: [
                    {required: true, message: 'Please input your username'}, // 必填校驗
                    {type: 'string', message: '最大長度50', max:50,}, // 長度校驗
                ]
        }],
        }
    },
}

 

 

 

 

 

Form 表單