Convenient way to mark a complete form as readonly

Question

I have an antd form with multiple form items and try to find a way to mark the complete form as readonly. I could for sure set each input component to 'disabled' but I wonder if there is a convenient way to do so on the form via an API call that I do not know yet.

score 3 · Answer 1 · answered Jun 13 '19 at 09:39

3

Wrapping the antd form inside a fieldset and setting this to 'disabled' works pretty well.

<fieldset disabled={editorDisabled}>
  <Form>
    ...
  <Form/>
<fieldset/>

answered Jun 13 '19 at 09:39

gibelium

101
1
6

1

I saw this at https://stackoverflow.com/a/36216001 but I think it is only for html
not a antd form? Or rather I mean this didn't work for me in antd.
– k1eran Oct 14 '20 at 22:53
1

Not work with select, datepicker – Fiodorov Andrei Feb 07 '22 at 11:34

score 1 · Answer 2 · answered May 10 '19 at 11:10

I don't see such an option in the form api, and I think it's the rare use case, so I doubt it exists. However, you can simply add variable which will track the disabled status, i.e.:

const YourAwesomeComponent = (props) => {
     const disabled = someLogicToCalculateTheDisabledStatus(props);
     return <Form ...>
         <Input disabled={disabled} ... />
         <Select disabled={disabled} ... />
         <Button disabled={disabled} ... />
     </Form>
}

Hope it helps.

Babis Skeparnakos · Answer 3 · 2023-02-09T14:23:30.503

0

As of version 4.21.0 (Jun 6, 2022) the disabled prop can be used in the form to disable all fields, i.e.:

<Form disabled={true}>
...
</Form>

It is enforced as long as a <Form.Item/> isn't explicitly marked as not disabled with disabled={false}. You can see the reference in antd docs here.

edited Feb 09 '23 at 14:23

answered Feb 08 '23 at 18:32

Babis Skeparnakos

34
1
7

Convenient way to mark a complete form as readonly

3 Answers3