亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果 Ant Design 為空,如何將字段變為 NOT required?

如果 Ant Design 為空,如何將字段變為 NOT required?

人到中年有點甜 2022-12-09 19:49:49
我正在制作一個按部分分開的表格。每個部分都有您的字段,所有字段都是必需的。我正在嘗試對每個部分進行驗證。如果每個部分的所有字段都是空的,好吧!表格必須把它變成非必填項,但如果只填寫一個字段,則所有部分都必須是必填項。換句話說....第 1 部分:姓名:“”,電子郵件:“”,年齡:“” ---> 沒有字段填寫,不是必需的!Section 2: Name: "aaa", Email: "", Age: "" --->填寫一個或多個字段,此部分為必填項!這是我的表格:const layout = {  labelCol: {    span: 8  },  wrapperCol: {    span: 16  }};const validateMessages = {  required: "${label} is required!"};const Demo = () => {  const onFinish = values => {    console.log(values);  };  return (    <Form      {...layout}      name="nest-messages"      onFinish={onFinish}      validateMessages={validateMessages}    >      <div class="section1">        <p> SECTIOOON 1</p>        <Form.Item          name={["user", "name"]}          label="Name"          rules={[            {              required: true            }          ]}        >          <Input />        </Form.Item>        <Form.Item          name={["user", "email"]}          label="Email"          rules={[            {              required: true,              type: "email"            }          ]}        >          <Input />        </Form.Item>        <Form.Item          name={["user", "age"]}          label="Age"          rules={[            {              required: true,              type: "number"            }          ]}        >          <InputNumber />        </Form.Item>      </div>      <div class="section2">        <p> SECTIOOON 2</p>        <Form.Item          name={["otherItem", "name"]}          label="Name"          rules={[            {              required: true            }          ]}        >          <Input />        </Form.Item>        <Form.Item          name={["otherItem", "email"]}          label="Email"          rules={[            {              required: true,              type: "email"            }          ]}      };我為它創建了一個codesandbox:https ://codesandbox.io/s/icy-fog-rdh7m我真的陷入其中,我不知道如何覆蓋antd表單驗證來做我想做的事。有人可以幫助我嗎?
查看完整描述

1 回答

?
達令說

TA貢獻1821條經驗 獲得超6個贊

你可以使用onValuesChange來自 antd 的Form Api來檢查字段內容是否為空。

const onValuesChange = (changedValues, allValues) => {

    const anyUser = allValues.user

      ? Object.values(allValues.user).filter(Boolean).length > 0

      : false;

    setUserRequired(anyUser);


    const anyOtherItem = allValues.otherItem

      ? Object.values(allValues.otherItem).filter(Boolean).length > 0

      : false;

    setOtherItemRequired(anyOtherItem);

  };

useState然后您可以通過 reacts鉤子將結果傳遞給rules表單項。


const [userRequired, setUserRequired] = useState(false);

示例表單項:


       <Form.Item

          name={["user", "name"]}

          label="Name"

          rules={[

            {

              required: userRequired

            }

          ]}

        >

最后但同樣重要的是,您必須在任何更改時驗證表單字段:


  useEffect(() => {

    form.validateFields();

  });

這是您的工作CodeSandBox。


也可以在文檔中找到動態 Antd 規則的一個很好的示例。


查看完整回答
反對 回復 2022-12-09
  • 1 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號