Few things I miss with the new <Form

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'} />

    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

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

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

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 

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

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?

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

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.

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

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

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

I will have lots of points :-)

Thank you