How to use the @data-driven-forms/react-form-renderer.validatorTypes.REQUIRED function in @data-driven-forms/react-form-renderer

To help you get started, we’ve selected a few @data-driven-forms/react-form-renderer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / get-started.js View on Github external
const schema = {
  fields: [{
    name: 'first-name',
    label: 'First name',
    component: componentTypes.TEXT_FIELD,
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }, {
    name: 'last-name',
    label: 'Last name',
    component: componentTypes.TEXT_FIELD,
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }, {
    name: 'age',
    label: 'Age',
    component: componentTypes.TEXT_FIELD,
    type: 'number',
  }],
};

const GetStartedForm = () => (
  <div>
    </div>
github data-driven-forms / react-forms / packages / pf4-component-mapper / demo / demo-schemas / sandbox.js View on Github external
},
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [
                    { type: validators.REQUIRED },
                  ],
                },
                {
                  name: 'text_box_4',
                  label: 'Text Box readonly',
                  title: 'Text Box readonly',
                  isReadOnly: true,
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_5',
                  label: 'Text Box default',
                  title: 'Text Box default',
                  component: components.TEXT_FIELD,
                },
                {
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / components / component-example.js View on Github external
validate: curr.name === 'isRequired' && !curr.value ? acc.validate.filter(({ type }) =>
          type === validatorTypes.REQUIRED) : curr.validate ? [ ...acc.validate, ...curr.validate ] : [ ...acc.validate ],
      });}, { validate: []});
github data-driven-forms / react-forms / packages / pf4-component-mapper / demo / demo-schemas / wizard-schema.js View on Github external
type: validatorTypes.REQUIRED,
        }],
        isRequired: true,
      }],
    }, {
      stepKey: 'google',
      title: 'Configure google',
      name: 'step-3',
      nextStep: 'summary',
      showTitle: false,
      fields: [{
        component: componentTypes.TEXT_FIELD,
        name: 'google.google-field',
        label: 'Google field part',
        validate: [{
          type: validatorTypes.REQUIRED,
        }],
      }],
    }, {
      fields: [{
        name: 'summary',
        component: 'summary',
      }],
      stepKey: 'summary',
      name: 'summary',
      substepOf: 'Summary',
      title: 'Summary',
    }],
  }],
};

export const wizardSchemaSimple = {
github data-driven-forms / react-forms / packages / mui-component-mapper / demo / demo-schemas / sandbox.js View on Github external
},
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [
                    { type: validators.REQUIRED },
                  ],
                },
                {
                  name: 'text_box_4',
                  label: 'Text Box readonly',
                  title: 'Text Box readonly',
                  isReadOnly: true,
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_5',
                  label: 'Text Box default',
                  title: 'Text Box default',
                  component: components.TEXT_FIELD,
                },
                {
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / pages / live-editor.js View on Github external
},
                {
                  name: 'text_box_2',
                  label: 'Text Box with help',
                  title: 'Text Box with help',
                  helperText: 'Helper text',
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_3',
                  label: 'Text Box required',
                  title: 'Text Box required',
                  isRequired: true,
                  component: components.TEXT_FIELD,
                  validate: [
                    { type: validators.REQUIRED },
                  ],
                },
                {
                  name: 'text_box_4',
                  label: 'Text Box readonly',
                  title: 'Text Box readonly',
                  isReadOnly: true,
                  component: components.TEXT_FIELD,
                },
                {
                  name: 'text_box_5',
                  label: 'Text Box default',
                  title: 'Text Box default',
                  component: components.TEXT_FIELD,
                },
                {
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / doc-components / get-started.js View on Github external
import React from 'react';
import FormRender, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { formFieldsMapper, layoutMapper } from '@data-driven-forms/pf4-component-mapper';

const schema = {
  fields: [{
    name: 'first-name',
    label: 'First name',
    component: componentTypes.TEXT_FIELD,
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }, {
    name: 'last-name',
    label: 'Last name',
    component: componentTypes.TEXT_FIELD,
    isRequired: true,
    validate: [{
      type: validatorTypes.REQUIRED,
    }],
  }, {
    name: 'age',
    label: 'Age',
    component: componentTypes.TEXT_FIELD,
    type: 'number',
  }],
};
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / pages / component-example.js View on Github external
validate: curr.name === 'isRequired' && !curr.value ? acc.validate.filter(({ type }) =>
          type === validatorTypes.REQUIRED) : curr.validate ? [ ...acc.validate, ...curr.validate ] : [ ...acc.validate ],
      });}, { validate: []});
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / pages / component-example.js View on Github external
if (!baseStructure) {
      this.state = {
        notFound: true,
        component: props.router.query.component,
      };
    } else {
      this.state = {
        ...baseStructure,
        variants: [
          ...baseStructure.variants,
          { name: 'name', title: 'Name', value: baseStructure.value.fields[0].name, component: 'input' },
          ...(baseStructure.canBeRequired ? [{
            name: 'isRequired',
            title: 'Required',
            validate: [{
              type: validatorTypes.REQUIRED,
            }],
          }] : []),
        ],
        value: JSON.stringify(baseStructure.value, null, 2),
        parsedSchema: baseStructure.value,
        activeMapper: 'mui',
        frameHeight: 360,
        openTooltip: false,
      };
    }

    this.mapperVariants = {
      mui: {
        formFieldsMapper: {
          ...props.mappers.mui.formFieldsMapper,
          [componentTypes.WIZARD]: MuiWizard,
github data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / components / navigation / examples-definitions.js View on Github external
}, {
          component: componentTypes.SELECT_COMPONENT,
          name: 'source-type',
          label: 'Source type',
          isRequired: true,
          options: [{
            label: 'Please Choose',
          }, {
            value: 'aws',
            label: 'Aws',
          }, {
            value: 'google',
            label: 'Google',
          }],
          validate: [{
            type: validatorTypes.REQUIRED,
          }],
        }],
      }, {
        title: 'Configure AWS',
        name: 'step-2',
        stepKey: 'aws',
        nextStep: 'summary',
        fields: [{
          component: componentTypes.TEXT_FIELD,
          name: 'aws-field',
          label: 'Aws field part',
        }],
      }, {
        stepKey: 'google',
        title: 'Configure google',
        name: 'step-3',

@data-driven-forms/react-form-renderer

React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.

Apache-2.0
Latest version published 9 days ago

Package Health Score

79 / 100
Full package analysis