antd form设置禁用

要禁用 Ant Design 的 Form 组件，可以在 Form 组件上设置 `disabled` 属性为 `true`。例如：

<Form disabled={true}>
  {/* 表单项 */}
</Form>

你也可以使用 `Form.Item` 组件的 `disabled` 属性来禁用某个表单项。例如：

<Form>
  <Form.Item label="Username" name="username" disabled={true}>
    <Input />
  </Form.Item>
  {/* 其他表单项 */}
</Form>

这将禁用表单中名为 `username` 的表单项，使其无法编辑。

相关问题

antd form试用getfielderror来设置按钮的disabled

在Ant Design（antd）的Form组件中，`getFieldError`是一个方法，用于获取某个字段的错误信息。当你想要基于表单字段是否校验失败来控制按钮的状态，例如将其设为禁用(disabled)，你可以按照以下步骤操作：

1. 首先，在Form组件内，你需要声明一个受控的输入字段，并给它一个ref，例如一个名为`username`的输入框：

import { Form, Input, Button } from 'antd';
const { Field } = Form;

<Form ref={formRef}>
  <Field name="username" rules={[{ required: true, message: '请输入用户名' }]}>
    {(props) => <Input ref={(c) => props.ref = c} />}
  </Field>
</Form>

2. 然后，在你想控制按钮的地方，检查`username`字段的错误状态：

const { getFieldError } = formRef.current; // 获取form实例的方法

<Button type="primary" disabled={!!(getFieldError('username')?.length > 0)}>
  提交
</Button>

这里我们使用`!`运算符取反，因为`getFieldError`返回的是数组，如果存在错误则长度大于0，所以当错误不为空时(`!...`)按钮就会被禁用。

antd form.list的disabled

`antd` 中的 `Form.List` 组件支持通过 `disabled` 属性禁用子元素的交互。具体来说，可以在 `Form.List` 组件的 `children` 函数中，通过 `disabled` 属性控制子元素的禁用状态，例如：

<Form.List name="users">
  {(fields, { add, remove }, { errors }) => (
    <>
      {fields.map((field, index) => (
        <Form.Item
          key={field.key}
          label={`User ${index + 1}`}
          validateTrigger={['onChange', 'onBlur']}
          rules={[
            {
              required: true,
              whitespace: true,
              message: "Please input user's name or delete this field.",
            },
          ]}
          {...field}
        >
          <Input disabled={index === 0} />
        </Form.Item>
      ))}
    </>
  )}
</Form.List>

在上面的例子中，我们设置了第一个子元素的 `disabled` 属性为 `true`，使其不可编辑。