lib/form/validated-form.js
/**
 * A wrapper for simple validated forms using Reactstrap Form and React-hook-form.
 * The validated fields/inputs must be direct children of the form.
 * This components injects methods and values from react-hook-form's `useForm` hook into the ValidatedField/ValidatedInput components
 * For complex use cases or for nested children, use Reactstrap form elements
 * or ValidatedField or ValidatedInput and pass methods and values from react-hook-form's `useForm` hook
 * directly as props
 *
 * @param ValidatedFormProps
 * @returns JSX.Element
 */
A wrapper for simple validated forms using Reactstrap Form and React-hook-form.
The validated fields/inputs must be direct children of the form.
This components injects methods and values from react-hook-form's `useForm` hook into the ValidatedField/ValidatedInput components
For complex use cases or for nested children, use Reactstrap form elements
or ValidatedField or ValidatedInput and pass methods and values from react-hook-form's `useForm` hook
directly as props


A wrapper for simple validated forms using Reactstrap Form and React - hook - form . The validated fields / inputs must be direct children of the form . This components injects methods and values from react - hook - form ' s ` useForm ` hook into the ValidatedField / ValidatedInput components For complex use cases or for nested children use Reactstrap form elements or ValidatedField or ValidatedInput and pass methods and values from react - hook - form ' s ` useForm ` hook directly as props
function ValidatedForm(_a) {
    var { defaultValues, children, onSubmit, mode } = _a, rest = (0, tslib_1.__rest)(_a, ["defaultValues", "children", "onSubmit", "mode"]);
    const { handleSubmit, register, reset, setValue, formState: { errors, touchedFields, dirtyFields }, } = (0, react_hook_form_1.useForm)({ mode: mode || 'onTouched', defaultValues });
    (0, react_2.useEffect)(() => {
        reset(defaultValues);
    }, [reset, defaultValues]);
    return (react_1.default.createElement(reactstrap_1.Form, Object.assign({ onSubmit: handleSubmit(onSubmit) }, rest), react_1.default.Children.map(children, (child) => {
        var _a;
        const type = child === null || child === void 0 ? void 0 : child.type;
        const isValidated = type && ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.name) && ['ValidatedField', 'ValidatedInput', 'ValidatedBlobField'].includes(type.displayName);
        if (isValidated) {
            const childName = child.props.name;
            const elem = Object.assign(Object.assign({}, child.props), { register: child.props.register || register, error: child.props.error || errors[childName], isTouched: typeof child.props.isTouched === 'undefined' ? touchedFields[childName] : child.props.isTouched, isDirty: typeof child.props.isDirty === 'undefined' ? dirtyFields[childName] : child.props.isDirty, key: childName });
            if (type.displayName === 'ValidatedBlobField') {
                const defaultValue = defaultValues[childName];
                const defaultContentType = defaultValues[`${childName}ContentType`];
                elem.setValue = typeof child.props.setValue === 'undefined' ? setValue : child.props.setValue;
                elem.defaultValue = typeof child.props.defaultValue === 'undefined' ? defaultValue : child.props.defaultValue;
                elem.defaultContentType =
                    typeof child.props.defaultContentType === 'undefined' ? defaultContentType : child.props.defaultContentType;
            }
            return react_1.default.createElement(type, Object.assign({}, elem));
        }
        return child;
    })));
}
function ValidatedForm ( _a ) { var { defaultValues , children , onSubmit , mode } = _a , rest = ( 0 , tslib_1 . __rest ) ( _a , [ "defaultValues" , "children" , "onSubmit" , "mode" ] ) ; const { handleSubmit , register , reset , setValue , formState : { errors , touchedFields , dirtyFields } , } = ( 0 , react_hook_form_1 . useForm ) ( { mode : mode || 'onTouched' , defaultValues } ) ; ( 0 , react_2 . useEffect ) ( ( ) => { reset ( defaultValues ) ; } , [ reset , defaultValues ] ) ; return ( react_1 . default . createElement ( reactstrap_1 . Form , Object . assign ( { onSubmit : handleSubmit ( onSubmit ) } , rest ) , react_1 . default . Children . map ( children , ( child ) => { var _a ; const type = child === null || child === void 0 ? void 0 : child . type ; const isValidated = type && ( ( _a = child === null || child === void 0 ? void 0 : child . props ) === null || _a === void 0 ? void 0 : _a . name ) && [ 'ValidatedField' , 'ValidatedInput' , 'ValidatedBlobField' ] . includes ( type . displayName ) ; if ( isValidated ) { const childName = child . props . name ; const elem = Object . assign ( Object . assign ( { } , child . props ) , { register : child . props . register || register , error : child . props . error || errors [ childName ] , isTouched : typeof child . props . isTouched === 'undefined' ? touchedFields [ childName ] : child . props . isTouched , isDirty : typeof child . props . isDirty === 'undefined' ? dirtyFields [ childName ] : child . props . isDirty , key : childName } ) ; if ( type . displayName === 'ValidatedBlobField' ) { const defaultValue = defaultValues [ childName ] ; const defaultContentType = defaultValues [ ` ${ childName } ` ] ; elem . setValue = typeof child . props . setValue === 'undefined' ? setValue : child . props . setValue ; elem . defaultValue = typeof child . props . defaultValue === 'undefined' ? defaultValue : child . props . defaultValue ; elem . defaultContentType = typeof child . props . defaultContentType === 'undefined' ? defaultContentType : child . props . defaultContentType ; } return react_1 . default . createElement ( type , Object . assign ( { } , elem ) ) ; } return child ; } ) ) ) ; }
A wrapper for simple validated forms using Reactstrap Form and React-hook-form.
A wrapper for simple validated forms using Reactstrap Form and React - hook - form .