是的驗證多個復選框

Question

我需要使用多個復選框創建以下字段。 我需要以下驗證：

1. 至少應選擇其中一項
2. 如果是其他字段用戶需要將文本添加到輸入字段

我需要編寫一個 yup 驗證來實現這一點。

Answer 1

1. 至少應選擇其中一項：
   這就是您將如何使用 yup 驗證規則來執行該邏輯

const validationSchema = yup.object().shape({
  assets: yup.array().min(1).of(yup.string().required()).required(),
});

2. 如果它的其他字段用戶需要將文本添加到輸入字段：
   您也可以使用 Formik 執行此邏輯，但我建議您為“資產”創建一個本地 state，如果您想使用文本字段創建新資產，只需將該新資產推送到資產本地字段，然后它會自動呈現該新資產屏幕。
   然后您可以選中或取消選中該新資產。 我希望你明白了。
   
   這是您可以檢查的代碼片段！

   import { useState } from "react";
    import * as yup from "yup";
    import { FieldArray, Formik } from "formik";
    
    const initialValues = {
      assets: [],
    };
    
    const validationSchema = yup.object().shape({
      assets: yup.array().min(1).of(yup.string().required()).required(),
    });
    
    function Form() {
      const [newAsset, setNewAsset] = useState("");
      const [assets, setAssets] = useState([
        "Property",
        "Motor Vehicles",
        "Financial Assets",
      ]);
    
      const handleAddNewAsset = () => {
        if (newAsset) {
          setAssets([...assets, newAsset]);
          setNewAsset("");
        }
      };
    
      return (
        <>
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(values) => {
              console.log("form values if validation succeed: ", values);
            }}
          >
            {(props) => (
              <form onSubmit={props.handleSubmit}>
                <FieldArray
                  name="assets"
                  render={(arrayHelpers) => (
                    <>
                      {assets.map((asset, idx) => (
                        <label className="form-check-label my-1">
                          <input
                            name={`assets.${idx}`}
                            type="checkbox"
                            className="form-check-input"
                            value={asset}
                            checked={props.values.assets.includes(asset)}
                            onChange={(e) => {
                              if (e.target.checked) {
                                arrayHelpers.push(asset);
                              } else {
                                const index = props.values.assets.indexOf(asset);
                                arrayHelpers.remove(index);
                              }
                            }}
                          />
                          <span className="mx-2">{asset}</span>
                        </label>
                      ))}
                    </>
                  )}
                />
                <input
                  type="text"
                  value={newAsset}
                  onChange={(e) => setNewAsset(e.target.value)}
                />
                <button type="button" onClick={handleAddNewAsset}>
                  Others (specify)
                </button>
              </form>
            )}
          </Formik>
        </>
      );
    }

我希望它會有所幫助。 謝謝！

Answer 2

對於問題 1 - 至少應選擇其中一個

試試下面的validationSchema

const validationSchema = Yup.object({checked: Yup.array().min(1, '選擇至少一個您感興趣的選項') });

在 FormIk 中使用 initialValues 如下： <Formik initialValues={{checked: []}} />

對於問題 2 - 其他字段驗證，您可以查看是的 api 文檔。