アンティサイザーフォーム送信データ処理

Question

アンティザーから試薬にアリのデザインコンポーネントを使用したいのですが、フォームからフィールド値を抽出する方法がわかりません。 documentationで何も見つかりません。

私より専門家がこの問題を解決しましたか？

Answer 1

ant/validate-fields関数にコールバックを指定すると、2つの引数：errorsとvaluesが返されます。

入力が有効な場合、errorsはnullになります。

第2引数には常に現在のフォームデータが含まれます。

;; 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!]))) 

私のリフレームのイベントは、このようになります。一DBのフォームデータを更新するイベント（フォーム入力によって提供されたキー/値のペアを使用して）、実際にフォームを送信するために別の：

(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)])}])] 

希望します。