current version

BlueprintJS mapper provides components from Blueprint UI toolkit.

npm install --save @data-driven-forms/blueprint-component-mapper

or

yarn add @data-driven-forms/blueprint-component-mapper

All Blueprint packages and styles have to be installed seperately. Please follow their guidelines.

Blueprint mapper provides an option to validate a field when the component is mounted. Just set validateOnMount to true.

{
    component: 'text-field',
    name: 'required-field',
    validate: [{type: 'required'}],
    validateOnMount: true
}

This field will show the error immediately.

Blueprint components do not use asterisks for indicating that fields are required, instead of it, it uses (required) string. This message can be customized via requiredLabelInfo prop passed to the default formTemplate. By default this message is set to <span className="bp4-text-muted">(required)</span>. Notice the className, that provides default Blueprint styles.

import FormTemplate from '@data-driven-forms/blueprint-component-mapper/form-template';


const FormTemplateWrapper = (props) => (
    <FormTemplate
        {...props}
        requiredLabelInfo={<span className="bp4-text-muted">(povinné)</span>}
    />
) // Czech translation

This content is accessible via

import BlueprintContext from '@data-driven-forms/blueprint-component-mapper/blueprint-context';

If you are using a custom FormTemplate, wrap it in the BlueprintContext to provide the required label.

import BlueprintContext from '@data-driven-forms/blueprint-component-mapper/blueprint-context';


const FormTemplate = ({ formFields }) => {
    const { handleSubmit } = useFormApi();


    return (
        <form onSubmit={handleSubmit}>
            <BlueprintContext.Provider
                value={{ required: { <span className="bp4-text-muted">(required)</span> }}}
            >
                {formFields}
            </BlueprintContext.Provider>
            <Buttons />
        <form>
    )
}