How to use the @data-driven-forms/react-form-renderer.validatorTypes.PATTERN_VALIDATOR 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.
data-driven-forms / react-forms / packages / react-renderer-demo / src-bak / docs-components / validators / pattern-validator.js View on Github 
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'regexp-pattern',
label: 'Regepx',
helperText: 'Value must be equal to Foo',
validate: [{
type: validatorTypes.PATTERN_VALIDATOR,
pattern: /^Foo$/,
}],
}, {
component: componentTypes.TEXT_FIELD,
name: 'string-pattern',
label: 'String pattern',
helperText: 'Value must be equal to Foo',
validate: [{
type: validatorTypes.PATTERN_VALIDATOR,
pattern: '^Foo$',
}],
}],
};
const PatternValidators = () => (
<div>
</div>
);import React from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { layoutMapper, formFieldsMapper } from '@data-driven-forms/pf4-component-mapper';
const schema = {
title: 'Start typing',
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'regexp-pattern',
label: 'Regepx',
helperText: 'Value must be equal to Foo',
validate: [{
type: validatorTypes.PATTERN_VALIDATOR,
pattern: /^Foo$/,
}],
}, {
component: componentTypes.TEXT_FIELD,
name: 'string-pattern',
label: 'String pattern',
helperText: 'Value must be equal to Foo',
validate: [{
type: validatorTypes.PATTERN_VALIDATOR,
pattern: '^Foo$',
}],
}],
};
const PatternValidators = () => (
<div></div>component: components.TEXT_FIELD,
},
{
name: 'text_box_6',
label: 'Text Box unvisible',
title: 'Text Box unvisible',
isVisible: false,
component: components.TEXT_FIELD,
},
{
name: 'text_box_7',
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '[0-9]',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',component: components.TEXT_FIELD,
},
{
name: 'text_box_6',
label: 'Text Box unvisible',
title: 'Text Box unvisible',
isVisible: false,
component: components.TEXT_FIELD,
},
{
name: 'text_box_7',
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '[0-9]',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',component: components.TEXT_FIELD,
},
{
name: 'text_box_6',
label: 'Text Box unvisible',
title: 'Text Box unvisible',
isVisible: false,
component: components.TEXT_FIELD,
},
{
name: 'text_box_7',
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '[0-9]',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',component: components.TEXT_FIELD,
},
{
name: 'text_box_6',
label: 'Text Box unvisible',
title: 'Text Box unvisible',
isVisible: false,
component: components.TEXT_FIELD,
},
{
name: 'text_box_7',
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '[0-9]',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',component: components.TEXT_FIELD,
},
{
name: 'text_box_6',
label: 'Text Box unvisible',
title: 'Text Box unvisible',
isVisible: false,
component: components.TEXT_FIELD,
},
{
name: 'text_box_7',
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '^[0-9]+$',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',@data-driven-forms/react-form-renderer
React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.
Package Health Score
79 / 100Popular @data-driven-forms/react-form-renderer functions
- @data-driven-forms/react-form-renderer.componentTypes.CHECKBOX
- @data-driven-forms/react-form-renderer.componentTypes.DATE_PICKER
- @data-driven-forms/react-form-renderer.componentTypes.PLAIN_TEXT
- @data-driven-forms/react-form-renderer.componentTypes.RADIO
- @data-driven-forms/react-form-renderer.componentTypes.SELECT_COMPONENT
- @data-driven-forms/react-form-renderer.componentTypes.SUB_FORM
- @data-driven-forms/react-form-renderer.componentTypes.SWITCH
- @data-driven-forms/react-form-renderer.componentTypes.TAB_ITEM
- @data-driven-forms/react-form-renderer.componentTypes.TABS
- @data-driven-forms/react-form-renderer.componentTypes.TEXT_FIELD
- @data-driven-forms/react-form-renderer.componentTypes.TEXTAREA_FIELD
- @data-driven-forms/react-form-renderer.componentTypes.TIME_PICKER
- @data-driven-forms/react-form-renderer.componentTypes.WIZARD
- @data-driven-forms/react-form-renderer.layoutComponents.BUTTON
- @data-driven-forms/react-form-renderer.layoutComponents.BUTTON_GROUP
- @data-driven-forms/react-form-renderer.layoutComponents.DESCRIPTION
- @data-driven-forms/react-form-renderer.layoutComponents.FORM_WRAPPER
- @data-driven-forms/react-form-renderer.layoutComponents.TITLE
- @data-driven-forms/react-form-renderer.validatorTypes.PATTERN_VALIDATOR
- @data-driven-forms/react-form-renderer.validatorTypes.REQUIRED