React-jsonschema-form: Allow marking complete form as disabled / read only

[k-nut]

Prerequisites

• [x] I have read the documentation;

Description

I would like to be able to render a complete form readonly or disabled. This is to show it to users later as a validation step. As far as I can tell this is not possible right now and I would have to add the respective property (ui:disabled/ui:readonly) for each input in the UISchema.

Would you agree that it might be useful to just set this globally on the form? If so I'd start preparing a pull request for it.

[glasserc]

I don't have a strong opinion about this. The standard HTML form controls support readonly and disabled, but only on form controls, not on the form element itself. I don't know if we should try to be doing anything more powerful than the underlying HTML abstraction does. I almost feel like we should be making it easier to perform other kinds of global transformations on schemas, perhaps by exporting utility functions that allow users to map over a schema to produce a UI schema or something?

[ojab]

I'm also interested in this, it's useful for displaying whole form with only some fields enabled based on various conditions.
Basically it means that props.disabled || uiSchema["ui:disabled"] order should be changed here.

Maybe hide it behind some uiSchema flag, so it will not break current behaviour?

[k-nut]

Now thinking about it again I think that I agree that it would make sense to not implement it like this but instead make it easier to generate a uiSchema from the schema or something like that. For the time being let me close this issue.

[eberkund]

I am trying to make a view mode which displays the data but does not allow editing. So far I've gone with something like this,

Object.keys(schema.properties).map(function (key, index) {
    uiSchema[key] = {'ui:readonly': true};
});

I think going beyond standard HTML controls is necessary because the whole form is getting rendered by this component. Unless there is a way to disable or remove the 'Submit' button that I am not seeing.

IMO having a readonly attribute on the form could remove the submit button and set all the inner controls to readonly as well sort of like a display mode.

[comwt]

For anyone looking into this in the future, the originally desired behavior (that of making the entire form readonly) can easily be accomplished, as follows:
uiSchema = { "ui:readonly": true }
No need to parse each property name of a JSON doc.

[eberkund]

@comwt Does that remove the submit button?

[YingXue]

@comwt Does that remove the submit button?

I tried it and it didn't disable or remove submit button. Also trying to figure out a way to do so...

[glasserc]

This got implemented eventually anyhow as #1056.

[epicfaace]

@eberkund @YingXue If you need to remove the submit button, you can just pass an empty div to the <Form> component: https://github.com/mozilla-services/react-jsonschema-form#form-action-buttons