@ambassify/ui-input-tv4 v4.13.1

ui-input-tv4

Input components enriched with a tv4 validator. You can pass the schema as a property on the various input components instead of a validator property.

To provide custom error messages or format validators, wrap your app in the <Tv4Container>.

Usage

import { TextField, Tv4Container, ErrorCodes } from '@ambassify/ui-input-tv4';

const messages = {
    [ErrorCodes.STRING_LENGTH_LONG]: ({ minimum }) => <span>Enter at least {minimum} characters</span>,
    'FORMAT.email': 'Please enter a valid e-mail address'
};

const formats = {
    'email': value => value.indexOf('@') > -1 ? null : 'It must be foo!'
};

class App extends React.Component {
    render() {
        return (
            <div>
                <TextField
                    label="Not customized"
                    schema={{ type: 'string', minLength: 2 }} />
                <Tv4Container messages={messages} formats={formats}>
                    <TextField
                        label="I have customized validation"
                        schema={{ type: 'string', format: 'email', minLength: 5 }} />
                </TV4Container>
            </div>
        );
    }
}

Error codes

These are taken from https://github.com/geraintluff/tv4/blob/master/tv4.js#L1370

var ErrorCodes = {
	INVALID_TYPE: 0,
	ENUM_MISMATCH: 1,
	ANY_OF_MISSING: 10,
	ONE_OF_MISSING: 11,
	ONE_OF_MULTIPLE: 12,
	NOT_PASSED: 13,
	// Numeric errors
	NUMBER_MULTIPLE_OF: 100,
	NUMBER_MINIMUM: 101,
	NUMBER_MINIMUM_EXCLUSIVE: 102,
	NUMBER_MAXIMUM: 103,
	NUMBER_MAXIMUM_EXCLUSIVE: 104,
	NUMBER_NOT_A_NUMBER: 105,
	// String errors
	STRING_LENGTH_SHORT: 200,
	STRING_LENGTH_LONG: 201,
	STRING_PATTERN: 202,
	// Object errors
	OBJECT_PROPERTIES_MINIMUM: 300,
	OBJECT_PROPERTIES_MAXIMUM: 301,
	OBJECT_REQUIRED: 302,
	OBJECT_ADDITIONAL_PROPERTIES: 303,
	OBJECT_DEPENDENCY_KEY: 304,
	// Array errors
	ARRAY_LENGTH_SHORT: 400,
	ARRAY_LENGTH_LONG: 401,
	ARRAY_UNIQUE: 402,
	ARRAY_ADDITIONAL_ITEMS: 403,
	// Custom/user-defined errors
	FORMAT_CUSTOM: 500,
	KEYWORD_CUSTOM: 501,
	// Schema structure
	CIRCULAR_REFERENCE: 600,
	// Non-standard validation options
	UNKNOWN_PROPERTY: 1000
};