This is a migrated thread and some comments may be shown as answers.

Few things I miss with the new <Form

14 Answers 121 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ofer
Top achievements
Rank 1
Veteran
Ofer asked on 24 Jan 2020, 03:10 PM

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

14 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 27 Jan 2020, 09:39 AM

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
0
Ofer
Top achievements
Rank 1
Veteran
answered on 27 Jan 2020, 01:51 PM
Thank you, this is super helpful
0
Ofer
Top achievements
Rank 1
Veteran
answered on 27 Jan 2020, 04:19 PM

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

 

 

0
Stefan
Telerik team
answered on 29 Jan 2020, 12:27 PM

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
0
Ofer
Top achievements
Rank 1
Veteran
answered on 29 Jan 2020, 01:25 PM

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 

 

0
Stefan
Telerik team
answered on 30 Jan 2020, 06:21 AM

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
0
Ofer
Top achievements
Rank 1
Veteran
answered on 15 Feb 2020, 02:10 PM

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?

0
Stefan
Telerik team
answered on 17 Feb 2020, 08:08 AM

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
0
Ofer
Top achievements
Rank 1
Veteran
answered on 17 Feb 2020, 01:14 PM
Thanks, That will get me going.
0
Ofer
Top achievements
Rank 1
Veteran
answered on 28 Jul 2020, 11:02 PM

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.

0
Stefan
Telerik team
answered on 29 Jul 2020, 06:00 AM

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

0
Ofer
Top achievements
Rank 1
Veteran
answered on 29 Jul 2020, 12:16 PM

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

0
Stefan
Telerik team
answered on 29 Jul 2020, 12:34 PM

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

0
Ofer
Top achievements
Rank 1
Veteran
answered on 29 Jul 2020, 12:40 PM

I will have lots of points :-)

Thank you

Tags
General Discussions
Asked by
Ofer
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Ofer
Top achievements
Rank 1
Veteran
Share this question
or