AntDesign表单之Form表单
本文最后更新于 253 天前,其中的信息可能已经有所发展或是发生改变。

Form表单不支持双向绑定,不能使用v-model 官网描述

第一、我们不推荐在 Form 中使用双向绑定,同一份数据可能在多处使用,如果使用双向绑定,那么数据的修改会同时同步到各个组件,但这并不是我们想要的, 你应该在表单提交成功或失败或确认时同步数据,使用非双向绑定的表单,你会拥有最大限度的控制数据修改/同步的权限。

第二、如果你不使用表单的自动校验/收集功能,即没有使用v-decorator修饰过得组件,你依然可以使用v-model

案例 演示操作

案例

<template>
  <div>
    <a-form :form="myLogin" @submit="handleSubmit">
      <a-form-item label="项目">
        <!--
          v-decorator
          第一个就是设置的表单内容键, 和v-model不一样,不需要在data里面去定义name字段
         -->
        <a-input v-decorator="['name']" />
      </a-form-item>
      <a-form-item>
        <!--
          v-decorator
          第二个是设置的表单校验(里面可以包含默认值详见下面的data)
         -->
        <a-input v-decorator="['age', rules.age]" />
      </a-form-item>
      <a-form-item>
        <a-input v-decorator="['adddess', rules.adddess]" />
      </a-form-item>
      <a-form-item>
        <!--
          v-decorator
          第二个是设置的表单校验(里面可以包含默认值详见下面的data, 可以通过 initialValue: "默认值" 设置默认值)
         -->
        <a-input v-decorator="['sex', rules.sex]" />
      </a-form-item>

      <a-form-item>
        <a-button html-type="submit">
          提交校验所有值:this.myLogin.validateFields((err, values)
        </a-button>
        <br>
        <a-button @click="subOneVal">
          提交校验某个值:this.myLogin.validateFields(["age"], (err, fieldsValue) 并返回这个值
        </a-button>
        <br>
        <a-button @click="btnSetVal">
          设置值/一个/多个: this.myLogin.setFieldsValue({ name: "名字", age: "28" });
        </a-button>
        <br>
        <a-button @click="getOneVal">
          获取一个值: this.myLogin.getFieldsValue(["name"]);
        </a-button>
        <br>
        <a-button @click="getMoreVal">
          获取多个值: this.myLogin.getFieldsValue(["name", "age"]);
        </a-button>
        <br>
        <a-button @click="getAllVal">
          获取全部值/表单提交: this.myLogin.getFieldsValue();
        </a-button>
        <br>
        <a-button @click="reset">
          重置表单:this.form.resetFields();
          <br>
          默认值重置无效,可以赋值为空解决
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      // 创建form表单,newForm就类似给表单起个名字,防止一个页面表单重复 options 更多配置参考下面的那张图
      // myLogin: this.$form.createForm(this, options),
      // myLogin: this.$form.createForm(this, "newForm"),
            // 这里可以设置更多的参数,参考api
      myLogin: this.$form.createForm(this, {
        name: 'newForm'
      }),
      // 规则校验 & 默认值
      rules: {
        age: { rules: [{ required: true, message: "年龄不能为空" }] },
        adddess: { rules: [{ required: true, message: "地址不能为空" }] },
        sex: { rules: [{ required: true, message: "不能为空" }], initialValue: "男" }
      }
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.myLogin.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    subOneVal() {
      this.myLogin.validateFields(["age"], (err, fieldsValue) => { // 校验某个值
        if (!err) {
          console.log(fieldsValue); // 仅返回 age 的值
        } else {
          console.log(err);
        }
      });
    },
    btnSetVal() {
      this.myLogin.setFieldsValue({ name: "名字", age: "28" });
    },
    getOneVal() {
      this.myLogin.getFieldsValue(["name"]);
      console.log(this.myLogin.getFieldsValue(["name"]));
    },
    getMoreVal() {
      this.myLogin.getFieldsValue(["name", "age"]);
      console.log(this.myLogin.getFieldsValue(["name", "age"]));
    },
    getAllVal() {
      this.myLogin.getFieldsValue();
      console.log(this.myLogin.getFieldsValue());
    },
    reset() {
      this.myLogin.resetFields();
    }
  }
};
</script>
<style lang="" scoped>

</style>

options 的配置项如下

options配置

语法

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);
  }
});

参考

标题:AntDesign表单之Form表单
地址:https://xiaodongxier.com/2063.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇