Grafana-UI: Form - inherit HTMLFormElement props (#27227)

packages/grafana-ui/src/components/Forms/Form.tsx

-import React, { useEffect } from 'react';
+import React, { HTMLProps, useEffect } from 'react';
 import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form';
 import { useForm, Mode, OnSubmit, DeepPartial } from 'react-hook-form';
 import { FormAPI } from '../../types';
 import { FormAPI } from '../../types';
 import { css } from 'emotion';
 import { css } from 'emotion';
 
 
-interface FormProps<T> {
+interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
   validateOn?: Mode;
   validateOn?: Mode;
   validateOnMount?: boolean;
   validateOnMount?: boolean;
   validateFieldsOnMount?: string[];
   validateFieldsOnMount?: string[];
@@ -22,6 +22,7 @@ export function Form<T>({
   children,
   children,
   validateOn = 'onSubmit',
   validateOn = 'onSubmit',
   maxWidth = 400,
   maxWidth = 400,
+  ...htmlProps
 }: FormProps<T>) {
 }: FormProps<T>) {
   const { handleSubmit, register, errors, control, triggerValidation, getValues, formState, watch } = useForm<T>({
   const { handleSubmit, register, errors, control, triggerValidation, getValues, formState, watch } = useForm<T>({
     mode: validateOn,
     mode: validateOn,
@@ -41,6 +42,7 @@ export function Form<T>({
         width: 100%;
         width: 100%;
       `}
       `}
       onSubmit={handleSubmit(onSubmit)}
       onSubmit={handleSubmit(onSubmit)}
+      {...htmlProps}
     >
     >
       {children({ register, errors, control, getValues, formState, watch })}
       {children({ register, errors, control, getValues, formState, watch })}
     </form>
     </form>