第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如果 Ant Design 為空,如何將字段變?yōu)?NOT required?

如果 Ant Design 為空,如何將字段變?yōu)?NOT required?

人到中年有點甜 2022-12-09 19:49:49
我正在制作一個按部分分開的表格。每個部分都有您的字段,所有字段都是必需的。我正在嘗試對每個部分進(jìn)行驗證。如果每個部分的所有字段都是空的,好吧!表格必須把它變成非必填項,但如果只填寫一個字段,則所有部分都必須是必填項。換句話說....第 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"            }          ]}      };我為它創(chuàng)建了一個codesandbox:https ://codesandbox.io/s/icy-fog-rdh7m我真的陷入其中,我不知道如何覆蓋antd表單驗證來做我想做的事。有人可以幫助我嗎?
查看完整描述

1 回答

?
達(dá)令說

TA貢獻(xiàn)1821條經(jīng)驗 獲得超6個贊

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

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鉤子將結(jié)果傳遞給rules表單項。


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

示例表單項:


       <Form.Item

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

          label="Name"

          rules={[

            {

              required: userRequired

            }

          ]}

        >

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


  useEffect(() => {

    form.validateFields();

  });

這是您的工作CodeSandBox。


也可以在文檔中找到動態(tài) Antd 規(guī)則的一個很好的示例。


查看完整回答
反對 回復(fù) 2022-12-09
  • 1 回答
  • 0 關(guān)注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號