rjsf-team/react-jsonschema-form

Feature request: Provide state helpers like `submitting`, `pristine`

Open

#504 opened on Mar 4, 2017

View on GitHub
 (3 comments) (13 reactions) (0 assignees)TypeScript (13,175 stars) (2,136 forks)batch import
featurehelp wanted

Description

Description

  1. Currently there is no native way to disable the submit button when a form is in a pristine state (has the same data as it did initially). This means that users are able to submit the form without form state change.

  2. Currently there is no native way to disabled the submit button a form is in a submitting state (is being sent to the server). This means that users are able to submit the form multiple times without the UI blocking these requests. This has larger security implications.

It's a common pattern of form providers, for example Angular and Redux-form to provide state booleans that can be used for customising form behaviour. Here's the example from Angular's docs:

ng-valid is set if the form is valid. ng-invalid is set if the form is invalid. ng-pending is set if the form is pending. ng-pristine is set if the form is pristine. ng-dirty is set if the form is dirty. ng-submitted is set if the form was submitted.

The way I am currently working around this is by overriding form behaviour and extending state, which is far from ideal as well as limited.

One way that I imagine this could work:

const Form = () => {
  const Buttons = ({submitting, pristine}) => {
    return <div>
      <button type="submit" disabled={pristine || submitting} />
    </div> 
  };
  return (
    <Form schema={{foo:'bar'}}
          transcluded={Buttons} />
  )
};

This feature request is also touched on here: https://github.com/mozilla-services/react-jsonschema-form/issues/402

Version

0.43.0

Contributor guide