禁用蚂蚁设计表单提交上的链接

Question

在尝试为我的电子商务网站创建结帐页面时，我遇到了这个问题。

使用蚂蚁设计的表单组件，如果没有填写所有必需的表单，如何禁用链接（继续交付）？如果电话号码字段未填写，则应禁用链接。

<Form.Item
  name={inputField.phoneNo}
  rules={[
    { required: true, message: "Please input your Phone Number!" },
  ]}
>
  <Input placeholder="Phone Number" />
</Form.Item>

<div>
  <Link to="/Cart">{"<"} return to cart</Link>
  <Form.Item>
    <Link
      to="/Delivery"
      style={{ float: "right" }}
    >
      <Button htmlType="submit">
        Continue to Delivery
      </Button>
    </Link>
  </Form.Item>
</div>

Answer 1

根据 Ant 设计文档，您可以禁用按钮，如下所示

const [form] = Form.useForm();
const [, forceUpdate] = useState();

  useEffect(() => {
forceUpdate({});
   }, []);

<Form.Item shouldUpdate={true}>
{() => (
<Button
 type="primary"
 htmlType="submit"
 disabled={!form.isFieldsTouched(false) ||
 form.getFieldsError().filter(({ errors }) => errors.length).length}>
 Log in</Button>)}
 </Form.Item>

Answer 2

您可以为它编写自定义逻辑，例如：

      <Button             
            disabled={
              !form.isFieldsTouched(true) ||
              form.getFieldsError().filter(({ errors }) => errors.length).length
            } 
            htmlType="submit"
      >
        Continue to Delivery
      </Button>