Unplanned
Last Updated: 14 Jul 2021 07:59 by ADMIN
Ryan
Created on: 20 Jun 2021 15:48
Category: KendoReact
Type: Feature Request
4
Form component with initial values does not allow submit if the initial values are not changed by the user first

Hello,

The Form component does not allow me to submit unless I modify the initial values. We have a Form that is provided with initial values that may not need to be modified by the user first - the data is all valid and acceptable. The user, currently, would need to purposefully modify one of the Field values in order to get the Form to realize that it can be submitted.

I'm aware of the submit click event but that event does not perform any validation.

I believe there needs to be some middle area where the Form can be provided initial values and be allowed to submit without having to modify the form first.

I have created a code sample showing the scenario below ...

https://stackblitz.com/edit/react-wf5veh-reyjj3?file=app/main.jsx

Thank you

5 comments
ADMIN
Stefan
Posted on: 14 Jul 2021 07:59

Hello, Ryan,

In that case, we can use the onSubmitClick event:

https://stackblitz.com/edit/react-wf5veh-tzpccz?file=app/main.jsx

The event has an isValid value, which can be used to ensure that the Form is valid before submitting it. If there is an invalid field, the validation will be shown as well.

Let me know if I'm missing a case.

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/.

Ryan
Posted on: 13 Jul 2021 14:12

Stefan,

The simplified requirements would be a Form with a single Field. The Form would have a valid initial value for that Field, such that the user shouldn't have to edit anything but should be able to hit Submit.

Here's my sample code from earlier: https://stackblitz.com/edit/react-wf5veh-reyjj3?file=app/main.jsx

In the above sample, you can see the Form is not able to submit until you edit the Field.

Thanks

ADMIN
Stefan
Posted on: 13 Jul 2021 07:17

Hello, Ryan,

Thank you for the detailed feedback and information.

I made an example with initial values, an invalid initial value, and clicking the submit button was firing the validation:

https://stackblitz.com/edit/react-d12syi?file=app/main.jsx

Please confirm if this is the requirement?

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/.

Ryan
Posted on: 12 Jul 2021 15:12

Thank you for the feedback Stefan.

I think currently the default values of a Form are confusing. If you use default values, and those values do not need to be modified, then the Form appears broken to the user - they can't submit. We use the Form component all over our application and are now finding that when the default values are used that the Forms all feel broken to the user. The user can modify the value and then undo their modification to allow the Form to submit, but that is not desired.

I'm aware that I can use the Form submit button clicked event handler to bypass the Form's internal check on whether or not it can submit. The issue with doing that is that it also bypasses the Form's validation of the inputs, which we use.

I could also change all of our Forms to no longer use the Form component, and instead just use Inputs, etc. That is not ideal because we use the Form validation quite a bit. It'd also be a big code change to remove usage of Form.

It's my feeling that the default values feature of the Form component is not working correctly. I think the Form component needs to perform it's internal check on whether or not it can submit in such a way that it includes default values. The default values should basically trigger the same internal adjustments that typing a value into the field triggers. Currently it doesn't seem like you can use default values because it might cause a Form to appear unsubmitable / broken.

Do you have any suggestions on the best approach for me? Is there a way I can trigger the Form's validation from within the Form button click event handler? That would be the least code changes for me if so.

Thank you,

Ryan

ADMIN
Stefan
Posted on: 21 Jun 2021 05:50

Hello, Ryan,

Thank you for the information, this is currently the default behavior of the Form component.

We will handle this like an improvement, as if we directly change it, this will cause breaking change and may affect many Forms that do not want this behavior. This is why we have to make a new property that will enable this per Form.

We will monitor the interest and plan it accordingly.

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/.