antd form设置禁用
时间: 2023-10-09 22:08:27 浏览: 79
要禁用 Ant Design 的 Form 组件,可以在 Form 组件上设置 `disabled` 属性为 `true`。例如:
```jsx
<Form disabled={true}>
{/* 表单项 */}
</Form>
```
你也可以使用 `Form.Item` 组件的 `disabled` 属性来禁用某个表单项。例如:
```jsx
<Form>
<Form.Item label="Username" name="username" disabled={true}>
<Input />
</Form.Item>
{/* 其他表单项 */}
</Form>
```
这将禁用表单中名为 `username` 的表单项,使其无法编辑。
相关问题
antd form.list的disabled
`antd` 中的 `Form.List` 组件支持通过 `disabled` 属性禁用子元素的交互。具体来说,可以在 `Form.List` 组件的 `children` 函数中,通过 `disabled` 属性控制子元素的禁用状态,例如:
```jsx
<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`,使其不可编辑。
antd form 的校验,会弹出原生form的校验,怎么去掉原生的校验。
可以通过在 `<Form>` 组件上设置 `noValidate` 属性来禁用原生的表单验证,示例代码如下:
```
<Form noValidate>
// 表单项
</Form>
```
另外,如果你使用了 `getFieldDecorator` 来包装表单项,你还可以通过在 `getFieldDecorator` 的第二个参数中设置 `validateFirst` 属性为 `true` 来实现只使用 antd 的表单验证,代码示例:
```
<Form>
<FormItem>
{getFieldDecorator('username', {
rules: [
{ required: true, message: '请输入用户名' },
{ min: 2, max: 20, message: '用户名长度为2~20个字符' },
{ pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能由字母、数字和下划线组成' },
],
validateFirst: true, // 只使用 antd 的表单验证
})(<Input placeholder="用户名" />)}
</FormItem>
</Form>
```
这样设置之后,就不会再弹出原生的表单验证了。