Few things I miss with the new <Form

15 posts, 1 answers
  1. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 24 Jan 2020 Link to this post

    I saw the webinar yesterday and started adopting the new "Form". Over all great way to work with forms.

    1. I did not see a way to have "< Field component={textarea}". using just <textarea> does not add the value to  the final object the "handleSubmit" get. Does it mean I have to replace all textarea with Editor?
    2. <Field component={Upload} does not error but does not show in the final object the "handleSubmit" how can I do that?
    3. "formRenderProps.onChange(.." can only be used inside the <Form ... />.  So I am forced to do anonymous functions on the onChange of each field that sets other fields. is there another way to allow  named functions?
    4. <fieldset><legend>Some text</legend> always shows "Some text" all uppercase. https://www.w3schools.com/tags/tag_legend.asp shows no change of case.

     

    Thank you

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 27 Jan 2020 Link to this post

    Hello, Ofer,

    Thank you for the feedback.

    Regarding the issues/questions:

    1) The name of the native HTML elements has to be passed as a string and the form will render them:

    <Field component={'textarea'} label={'My text area'} />
    2) This can be done by adding the upload files to the FormData:

        const handleSubmit = (dataItem) => {
          const {files, ...otherFields} = dataItem;
    
          const formData = new FormData();
    
          formData.append('files', files.map(file => file.getRawFile()));
    
          Object.keys(otherFields).forEach(prop => {
              formData.append(prop, otherFields[prop]);
          });
    
          // submit your formData
        };

     

    3) We can agree that this is e helpful improvement and added to the list of improvements(5th) planned for the next release:

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

    4) This is coming from a CSS rule in the themes. It can be overwritten with the following CSS:

    .k-form legend, .k-form-inline legend {
        text-transform: none;
    }

     

    This is a runnable example that shows question 1,2 and 4:

    https://stackblitz.com/edit/react-kaxc8q-ppqpkg?file=index.html

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 27 Jan 2020 in reply to Stefan Link to this post

    Thank you, this is super helpful
  4. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 27 Jan 2020 in reply to Stefan Link to this post

    2) Turns out using the const UploadInput = (fieldRenderProps) => { custom field is enough to have it as part of the dataItem in the handleSubmit, the is no need to append it to the FormData. Never the less the example helps

    4) Cool works fine.

    Got more that I could not figure out.

    5)  How can I keep "allowSubmit": false until a combination of other values is true. Do I need to add a "validator" function to each of the fields separated? Ther is no Form Validator?

    6) How do I clear all the fields in the form?

    Thanks again

     

     

  5. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 29 Jan 2020 Link to this post

    Hello, Ofer,

    In regards to the additional questions:

    5) This is one of the items of the issue that I linked earlier:

    Form level validation - submit level validation.

    6) This can be done using the onFormReset callback

    https://www.telerik.com/kendo-react-ui/components/form/api/FormRenderProps/#toc-onformreset

    Usage:

    <button type="button" className="k-button" onClick={formRenderProps.onFormReset}>Clear</button>

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 29 Jan 2020 in reply to Stefan Link to this post

    5) So how can I set allowSubmit": false?  I have a situation where one field is valid by default but the user can clear it and make the form NOT ready to Submit. Any idea when "Form level validation - submit level validation." be available?

    6) Thanks, The name "onFormReset" is a hint for an event not an action :-)

    Thanks for the help 

     

  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 30 Jan 2020 Link to this post

    Hello, Ofer,

    Any idea when "Form level validation - submit level validation." be available? - The team is already working on it, but still giving a specific ETA could end up misleading. The work is already started, so we will update the GitHub issue as soon as there is any news.

    - The name "onFormReset" is a hint for an event, not an action - I can agree that it could be misleading. The main reason is that it is a callback, similar to the onSubmit callback, which is used in a similar way.

    https://www.telerik.com/kendo-react-ui/components/form/api/FormRenderProps/#toc-onsubmit

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 15 Feb 2020 in reply to Stefan Link to this post

    Me again :-) 

    I saw FieldArray and Form level validation are available in 3.11.0-dev.202002031337 Is there documentation and or example for "Form level validation" ?

    Also I tried to enclose the Form's onSubmit in a anonymous function so I could clear (reset) the form if the submit actions are successful. they are a bunch of awaited functions. I did the following but I never get into the "handleSubmit" function

    onSubmit={ async e => { 
                await e.handleSubmit;
                if (e.formRenderProps !== undefined) {e.formRenderProps.onFormReset; }
              }} 

    Is there a better syntax that will work?

  9. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 17 Feb 2020 Link to this post

    Hello, Ofer,

    All new features that are still in the dev version can be seen in the developed version of the site, where we upload the component and the documentation for the component and features with the dev version. Please check the following article for validation as it has the validation examples and it has one using FieldArray:

    https://www.telerik.com/kendo-react-ui-develop/components/form/validation/

    As for resetting the form, we can suggest this be done on the callback of the request that is made. We noticed that the onResetForm is not available there, and we logged a task to expose it as a part of the component ref.

    Until then a key can be used to reset it:

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

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 17 Feb 2020 in reply to Stefan Link to this post

    Thanks, That will get me going.
  11. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 28 Jul 2020 in reply to Stefan Link to this post

    This worked fine until I upgraded to 3.15 

    Now the fields <Field component={'textarea'} name={'optAddress'}

    come {optAddress: undefined} when you look at otherFields

    I will go back to 3.10 but you probably want to fix it.

  12. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 29 Jul 2020 Link to this post

    Hello, Ofer,

    Could you please share an example showcasing the new issue? I looked and the previous posts and we used `otherFields` in the Upload example and after updating that example to 3.15.0 the values were still populated:

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

    Regards,
    Stefan
    Progress Telerik

  13. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 29 Jul 2020 in reply to Stefan Link to this post

    Use this same link. show the console and try entering text into the text area then submit

    you will see there is nothing for the textarea

  14. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 29 Jul 2020 Link to this post

    Hello, Ofer,

    Thank you for the confirmation.

    I tested and located that the issue occurs when a native DOM input/textarea are used. I have logged this for fixing:

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

    I have added some Telerik points for your account for bringing this to our attention.

    Regards,
    Stefan
    Progress Telerik

  15. Ofer
    Ofer avatar
    28 posts
    Member since:
    Jul 2019

    Posted 29 Jul 2020 in reply to Stefan Link to this post

    I will have lots of points :-)

    Thank you

Back to Top