firflant / react-form-component

Simply create a forms, without having to write state management logic on your own. Form library based on Context API with a wide selection of user friendly inputs.
32 stars 4 forks source link

Input validation of initial values #1

Closed Moshyfawn closed 3 years ago

Moshyfawn commented 5 years ago

Expected Behavior: Input field with required prop containing initial values (null) is required and prevents user from form submition Actual Behavior: User can submit form without touching form inputs with initial values (null)

Steps to Reproduce the Problem:

  1. Create Form with react-standalone-form components <Form />, <Input />, <FormButton />
  2. Pass required prop to
  3. Try submiting form without touching : leave it with its initial value (null)

Specifications: Version: react-standalone-form v 0.2.0 OS: Linux Mint 19.1 Cinnamon

firflant commented 5 years ago

@Moshyfawn Thank you for detailed description. Sorry for long reply, i was on a summer break, traveling.

react-standalone-form works differently than you think. Referring to docs, you define which fields are on a level of <Form /> component, not in a particular input. See a following example:

<Form fields={['input']} required={['input']}>
  <Input name='input' label='Input' />
</Form>

Optionally, you can use allRequired boolean prop to set all fields in a form as a required ones.

I understand that setting whether input is required or not on a level of input itself would be more intuitive, but how it currently works is dictated by an architecture. So far i did not figured out how to achieve this in a way how you described, without causing multiple rerenders during an initiation of a form. I will in a future, when i will have more time. It does not prevent this package from using it, but it puts a developer's experience on a higher level. I also seek for co-maintainers of this package.

firflant commented 3 years ago

I am closing this issue due to inactivity on this topic. Setting required fields from a level of Form component seems to work well.