FormProps

Premium

Represents the props of the KendoReact Form component.

Name	Type	Default	Description
ignoreModified?	boolean		Set this to true to allow the form to submit without modified fields. jsx <Form ignoreModified={true} render={props => <form>form content </form>} />
initialValues?	{[name: string]: any}		The initial field values of the Form. When you initialize the Form fields, set initial values to them. Otherwise, some components might throw errors related to switching from uncontrolled to controlled mode. jsx const initialValues = { user: { name: '', age: 0 } }; <Form initialValues={initialValues} render={props => <form>form content</form>} />
onSubmit?	(values: {[name: string]: any}, event?: SyntheticEvent<any>) => void		The submission handler for the Form. Called when at least one field has been modified, the user pressed the Submit button, and the form validation was successful. jsx const handleSubmit = (values, event) => console.log(values); <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
onSubmitClick?	(event: FormSubmitClickEvent) => void		Called every time the user presses the Submit button. Useful in advanced scenarios when you need to handle every submit event, even when the form is invalid or in an unmodified state. jsx const handleSubmitClick = event => console.log(event); <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
render	(props: FormRenderProps) => any		The Form content that will be rendered. jsx const renderForm = props => <form> form content </form>; <Form render={renderForm} />
validator?	FormValidatorType		The validation function for the Form level. Should return a key-value pair where the key is the field path and the value is the error message. Nested fields are supported, e.g.: 'users[0].name'. You can use the same field path to access the value from the values object using the getter function from the kendo-react-common package. Currently, validator supports only synchronous functions. jsx const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } }); <Form validator={validator} render={props => <form> form content </form>} />