1. 程式人生 > 程式設計 >解決ant Design中this.props.form.validateFields未執行的問題

解決ant Design中this.props.form.validateFields未執行的問題

在使用ant Designd的 form 元件時發現點選提交方法中 this.props.form.validateFields((err,values) => {}) 部分未執行,也沒有報錯。

原因:

我使用了自定義校驗 validator ,在自定義校驗方法中有個錯誤,使用了未定義的變數。

注意:

1、使用validator 時,注意自定義方法中是否有錯誤;對於如何解決沒有錯誤提示,官網提示:可以選擇通過 async 返回一個 promise 或者使用 try...catch進行錯誤捕獲,具體檢視官網form元件;

2、使用validator 時,自定義方法中 callback 必須被呼叫。

補充知識:ant design vue 表單域的validateFields取值和子item的change取值的先後問題

廢話不多,先咔的擼出程式碼先

我先在created中初始化表單域form

解決ant Design中this.props.form.validateFields未執行的問題

然後在表單域子節點中繫結@change="handleChange"函式,

解決ant Design中this.props.form.validateFields未執行的問題

然後我設想是每一次單選完後打印出單選後的值

解決ant Design中this.props.form.validateFields未執行的問題

然而結果是每次列印的值是單選前的值,比如:

我開始時預設選正常,第一次選異常,打印出正常

第二次選正常,結果打印出異常

解決ant Design中this.props.form.validateFields未執行的問題

我懵逼了,一般出現這種情況應該是跟事件機制同步或者非同步的先後順序有關,於是仔細設定了validateFields為非同步輸出

解決ant Design中this.props.form.validateFields未執行的問題

這回輸出正常了,

解決ant Design中this.props.form.validateFields未執行的問題

果然是,個人猜測是輸入框的change事件賦值發生在表單域的validateFields()事件之後,導致取到的值是修改前的值

以上這篇解決ant Design中this.props.form.validateFields未執行的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。