Antizer表单提交数据处理

Question

我想通过 antizer 在试剂中使用 ant design 组件，但我不知道如何在提交后从表单中提取字段值。我在 documentation.

中找不到任何内容

有比我更专业的人解决了这个问题吗？

Answer 1

如果您向 ant/validate-fields 函数提供回调，它将接收两个参数：errors 和 values。

如果输入有效，errors 将是 null。

第二个参数将始终包含当前表单数据。

;; Receive the output of `ant/validate-fields`, and react accordingly
(defn submit-form-if-valid
  [errors values]
  (if (nil? errors)
    (println "Form is valid."     values)
    (println "Validation failed." errors)))

(defn sample-form
  (fn [props]
    (let [my-form         (ant/create-form)
          submit-handler #(ant/validate-fields my-form submit-form-if-valid)]
      [:div
       [ant/form {:on-submit #(do
                                (.preventDefault %)
                                (submit-handler))}
         [ant/form-item ...]
         [ant/form-item ...]
         [ant/form-item ...]
         [ant/form-item
           [ant/button {:type "primary"
                        :html-type "submit"}
            "Submit"]]]])))

注：我个人只用这个功能来检查errors。每次用户更改字段时，我的表单数据都会持续记录在 app-db 中。所以我的提交处理程序看起来更像这样：

(defn submit-form-if-valid
  [errors _]
  (when (nil? errors)
    (dispatch [:sample-form/submit!])))

我的重构事件看起来像这样。一个事件更新数据库中的表单数据（使用表单输入提供的 key/value 对），另一个实际提交表单：

(reg-event-db
 :sample-form/update-value
 [(path db/path)]
 (fn [db [_ k v]]
   (assoc-in db [:sample-form-data k] v)))

(reg-event-fx
 :sample-form/submit!
 [(path db/path)]
 (fn [{:keys [db]} _]
   (let [form-data (:sample-form-data db)])
     ;; ... send data to back-end, handle the response, etc.
  ))

我的每个表单输入都会像这样调用该事件：

[ant/form-item 
  (ant/decorate-field my-form "Thing #1" {:rules [{:required true}]}
    [ant/input {:on-change #(dispatch [:sample-form/update-value :thing1 (-> % .-target .-value)])}])]

希望对您有所帮助！

Antizer表单提交数据处理

Antizer form submit data handling

clojurescript

reagent-forms