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

91
6

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
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.

Convenient way to mark a complete form as readonly

2 Answers2