Question

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

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

<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

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

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

Answer 2

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


def custom_page(request, slug):
    context = {
        'all': CustomPage.objects.filter(slug=slug),
        'toBePublished': CustomPage.objects.all()
    }


    return render(request, 'member/custom_page.html', context)

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

2 个答案: