import ValidatorForm from 'prg-form/src/ValidatorForm.jsx'

public class | source

ValidatorForm

Extends:

Component → ValidatorForm

Form with integrated validation support

use with Prg Validator utility

PropTypes

property	type	type signature	description
`t`	`function`	`word => 'string'`	translator provided to validator
`className`	`string`		form class name
`validator`	`string`	required	validator
`values`	`object`		values to fill the form
`onChange`	`function`	`(inputName, input) => {}`)	form change handler
`onBeforeValidate`	`function`	`(values) => {}`	fired after submit, before validation
`onSubmit`	`function`	`(values) => {}`	fired after sucessfully validated submit
`onValidationFailed`	`function`	`(errors) => {}`	fired after unsucessfull validation
`validatorContext`	`string`		is provided as parameter to validator

Validator interface

validateProp(inputName: string, value: any, ctx: string, data: object) : Promise
- fired after onChange event
- inputName - name of the input
- value - current input value
- ctx - passed validatorContext
- data - values of other inputs in form
validate(data: object, ctx: string) : Promise
- fired after onSubmit event
- data - whole form data
- ctx - passed validatorContext

Example:

import { ValidatorForm, Input } from 'prg-form';
import Validator from 'prg-validator';

function MyForm ({ values }) {
    const validator = new Validator();

    validator.add('email')
        .isEmail('Email should be valid');

    return (
        <ValidatorForm
            className="special-class"
            onSubmit={(values, form) => console.log(values)}
            onChange={(input) => console.log(input.name, input.getValue())}
            validator={validator}
            values={values}
        >
             <Input type="email" name="inputName" label="Input Label" />
        </Form>
    );
}

Method Summary

Public Methods
public	getValues(): object Returns form values
public	reset(data: Object) Resets form without trigging the validation

Public Methods

public getValues(): object source

Returns form values

Return:

object

public reset(data: Object) source

Resets form without trigging the validation

Params:

Name	Type	Attribute	Description
data	Object	optional

Example:

// makes form empty and resets all errors
form.reset();

// sets data and resets all errors without trigging the validation
form.reset();