Form Validation with Default Values

3 posts, 1 answers
  1. Dennis
    Dennis avatar
    4 posts
    Member since:
    Aug 2016

    Posted 17 Jun 2020 Link to this post

    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

     

  2. Dennis
    Dennis avatar
    4 posts
    Member since:
    Aug 2016

    Posted 17 Jun 2020 in reply to Dennis Link to this post

    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

  3. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 18 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top