Unplanned
Last Updated: 07 Mar 2022 05:47 by ADMIN
Jeff
Created on: 03 Mar 2022 17:57
Category: KendoReact
Type: Feature Request
3
Export FormContext in @progress/kendo-react-form

The Kendo Form component internally uses a FormContext which is ued by FormElement and Field. However this Context is not exported in @progress/kendo-react-form

Please export this context. It would really help with the usability of the Form component for complex forms. There are things in the FormContext that are not available in the formRenderProps.

Alternatively, put everything from the context into the FormRenderProps. These don't seem like they needed to be 2 different objects.

Specifically with the Context you can see what fields have been `touched`, `visited` and `modified`. But with the render props you only get a boolean if any field has been touched, visited or modified; not the names of the fields.

3 comments
ADMIN
Stefan
Posted on: 07 Mar 2022 05:47

Hello, Jeff,

Thank you for the detailed scenarios.

We will have them in mind when implementing the context.

Also, I can suggest checking this item as it has a demo for remote validation that can provide helpful until the full feature is ready:

https://github.com/telerik/kendo-react/issues/438

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jeff
Posted on: 04 Mar 2022 13:44

if there is a specific case that is not possible with the current implementation, please let us know

 

I have 2 cases where I had a hard time implementing a feature. We were migrating from Formik which does have a Context that we can use to get the detail we needed;

1) handling server-side errors. Then we get a response back from the server that contains possible validation errors,  would like to do a pass over the keys in the error object to see if they line up with names of form fields. If so, I return these errors from the Form's `validator` so that they are shown inline in the form. For other errors that did not match a form field, I show them in a toast/alert popup. This would be a lot easier to do with the Form's `fields`property, which it holds internally.

2) Displaying all validation errors in a single panel element. This one is an unfortunate side-effect of some big forms that we have, that are split into multiple tab views. Unfortunately I can't change the API right now and it requires the entire multi-view form to be submitted at once. This can result in server-side validation errors for form elements that are in different hidden tabs or collapsed panels. As a workaround, we were just going to put all the errors in a single element that is always visible at the top of the page. This isn't terrible hard to do for showing errors that come back from the server, but for form fields that have their own `validator` function, those always return errors even when a field is untouched, so for things like required fields, validation errors would show up immediately. The Kendo Field component works around this by passes the prop

valid: !(Boolean(form.errors[name]) && form.touched[name]),

But from outside the element, all we get is a single "touched" boolean for the entire form, not which individual fields have been touched. That data is in the context.

ADMIN
Stefan
Posted on: 04 Mar 2022 06:45

Hello, Jeff,

Thank you for the request.

We will monitor its popularity and plat it accordingly.

Also, if there is a specific case that is not possible with the current implementation, please let us know, so we have it in mind when exposing the context.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.