Form Validation with Default Values

[Dennis]

I am using @progress/kendo-react-form with @progress/kendo-react-inputs to create a form. I am using the form to edit existing data, and to add new records as well, populated from and saved to a db server.

To get the data for existing records to display, I am using defaultValue for each input. However, when trying to validate the form, validation only registers that the form element actually has data when it has been changed through user input. 

So if I open a form and change one field, other fields that had not been changed, and which still show the defaultValue value, are considered invalid.

What is the best practice way to use form validation on a form used for editing existing data?

Here is a really simple example:

https://stackblitz.com/edit/react-5phafx

 

[Dennis]

I think I may have found a solution, or at least, a workaround. If, instead of setting defaultValue={valueObject} on each individual form element, I create an object with default values for the form in it and pass it to the defaultValues={valuesObject} it works. When submitting a validated form (with a validator for the form rather than individual validators for the individual form inputs), validation occurs correctly.

Interestingly, the values returned in the form's onSubmit function is all the values set and not just the ones changed.

I updated my previous example at https://stackblitz.com/edit/react-5phafx?file=app%2Fmain.jsx

[Stefan]

Hello, Dennis,

Thank you for the information and the examples.

Indeed using the Form initialValuesis is the correct way to set the values initially:

https://www.telerik.com/kendo-react-ui/components/form/api/FormProps/

One very important fact for the Form is that when it is used, the values have to the set and controlled by the Form not individually for each field. If a custom field is used, its value and changes has to go through the Form props.

Regards,
Stefan
Progress Telerik

[Lex]

The accepted  answer will not work on FieldArray fields. Because it's know known how many will be submitted. So, actually submitting a field with default value not modified would be nice. I am struggling to make it work.

Please support

[Filip]

Hello, Lex,

In more complex scenarios for submitting the Form, we recommend using the onSubmitClick event of the Form instead, where you can perform custom logic for submitting. Using the onSubmitClick can also allow you to submit the Form without modifications:

https://stackblitz.com/edit/react-aaq82w-vvcdqg?file=app%2Fmain.jsx

I hope this helps.