jquense / react-formal

Sophisticated HTML form management for React
http://jquense.github.io/react-formal
MIT License
526 stars 52 forks source link

FormContext doesn't propagate errors outside of Form #106

Open rosskevin opened 7 years ago

rosskevin commented 7 years ago

I have a validation error disabled submit button - when inside a <Form>, it will be disabled (upon the first error #98).

When using a <FormContext>, necessary due to the structure of the UI components, it doesn't receive notices of the error.

Submit:

import React from 'react';
import Form from 'react-formal';

export default function Submit(props) {
  return (
    <Form.Trigger group="@all">
      {({ messages }) =>
         <Form.Button
             {...props}
             type='submit'
             disabled={!!Object.keys(messages).length}
         />
      }
    </Form.Trigger>
  );
}

Here is an abbreviated sample (the real structure is a bit of a composite for reuse):

const schema = yup.object({
  first_name: yup.string().default('').required()
})

<FormContext>
  <Card>
    <Content>
      <Form schema={schema}>
        <Field name='first_name' />
      </Form>
    </Content>
    <Actions>
      <Submit>Submit</Submit>
    </Actions>
  </Card>
</FormContext>
jquense commented 7 years ago

hmm this is kinda tough to fix give how errorupdates propagate... at a glance I'm not sure how to fix this, but it probably should be fixed