antd vue v-decorator的取值與賦值問題

Posted on by

antd vue v-decorator的取值與賦值

v-decorator 是 Ant Design 的控件驗證屬性。

經過 getFieldDecorator 或 v-decorator 包裝的控件，表單控件會自動添加 value（或 valuePropName 指定的其他屬性） onChange（或 trigger 指定的其他屬性），數據同步將被 Form 接管

這會導致以下結果：

  • 你不再需要也不應該用 onChange 來做同步，但還是可以繼續監聽 onChange 等事件。
  • 你不能用控件的 value defaultValue 等屬性來設置表單域的值，默認值可以用 getFieldDecorator 或 v-decorator 裡的 initialValue。
  • 你不應該用 v-model，可以使用 this.form.setFieldsValue 來動態改變表單值。

定義form：

<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
        <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="賬戶: "
              v-decorator="[
                'username',
                {initialValue:'',rules: [{ required: true, message: '請輸入帳戶名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
    </a-form>
 </div>
</template>
 
<script>
...
export default {
  ...
  data () {
    return {
      ...
      form: this.$form.createForm(this),
    }
  },
  created () {
    
  },
  ...
}
</script>

v-decorator 取值：

this.form.validateFields((err, values) => {
  // 這裡做邏輯處理
  console.log(values) // { username: '' }
})

v-decorator 賦值：

this.form.setFieldsValue({
  username: '設置值'
})

清空表單數據：

this.form.resetFields

ant design vue之v-decorator問題

1.在template中直接使用

required: true 設置必填, trigger: 'blur' 設置失去焦點觸發校驗

<a-input
  v-decorator="['name', { rules: [{ required: true, message: '請輸入賬號!'}],trigger: 'blur' }]" 
 />

2.在script中設置校驗規則

template 部分

 <a-input
   v-decorator="['password', validatorRules.password]"
 />

script 部分

   data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name與v-decorator中屬性對應
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '請輸入密碼!'},//此處開啟校驗必填
              { min: 5, message: '長度不少於 5 個字符'}, // 長度校驗
              { validator: this.validatePassword},//校驗規則函數，
            ],
            trigger: 'blur' // 觸發方式
          },
        },
    }
  },
   methods: {
      validatePassword(rule, value, callback) {
      
      }
  }

3. 完整代碼

<template>
  <div class="login">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="name">
      <!-- 直接寫檢驗規則 -->
      <a-input
         v-decorator="['name', { rules: [{ required: true, message: '請輸入賬號!'}],trigger: 'blur' }]" 
      />
    </a-form-item>
    <a-form-item label="password">
      <!-- 在script 裡面定義更復雜的檢驗規則,  -->
      <a-input
        v-decorator="['password', validatorRules.password]"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">
        Login
      </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name與v-decorator中屬性對應
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '請輸入密碼!'},//此處開啟校驗必填
              { min: 5, message: '長度不少於 5 個字符'}, // 長度校驗
              { validator: this.validatePassword},//校驗規則函數，
            ],
            trigger: 'blur' // 觸發方式
          },
        },
    }
  },
  created(){
    // this.$nextTick(() => {
    //     this.form.setFieldsValue({name:'yyy',password: 123});
    //   })
  },
  mounted(){
    this.form.setFieldsValue({name:'yyy',password: 123});
  },
  methods: {
     handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    validatePassword(rule, value, callback) {
      
    }
  }
}
</script>

註意：

確保使用 this.form.setFieldsValue({name:'yyy',password: 123}) 設置值

或者 this.form.validateFields((err, values) => { }); 獲取值

之前

已經 this.$form.createForm(this)

如果在鉤子函數裡面使用 setFieldsValue 報類似錯誤

warning.js?d96e:34 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render.

可以這樣試下

this.$nextTick(() => {
  this.form.setFieldsValue({name:'yyy',password: 123});
})

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：