import { withValidation, Validator } from '@bynder/react-formulation';
 
@withValidation({
    validateOn: 'change', // optional, default value is 'blur' 
    schema: {
        firstname: {
            required: true,
        },
        lastname: {
            minLength: 2,
            maxLenght: 30,
        },
        // ...more validation rules 
    }
})
class YourForm extends React.Component {
    componentWillMount() {
        this.props.setInitialModel({
        	firstname: 'Foo',
        	lastname: 'Bar',
        });
    }
 
    onSubmit() {
        // handle submit 
    }
 
    render() {
        // Wrap your entire form in a <Validator.Form> component 
        // Add a submit handler 
        // Wrap every input in a <Validator> component 
        // Provide a name to Validator (must match the name you provided in the schema) 
        return (
            <Validator.Form onSubmit={this.onSubmit}>
                <Validator name="firstname">
                    <input />
                </Validator>
                <Validator name="lastname">
                    <input />
                </Validator>
                <button type="submit">Submit</submit>
            </Validator.Form>
        );
    }
}
 
export default YourForm;

import { InlineForm } from '@bynder/react-formulation';
 
// Wrap your input and buttons in an <InlineForm> component. 
// Provide the name of your input, validation rules, initial value, 
// and optionally custom messages to this component. 
// Add an onSubmit handler. 
// Wrap the input in a <InlineForm.Field> component. 
const YourInlineForm = () => (
    <InlineForm
        name="firstname"
        initialValue="Foo"
        rules={{
            required: true,
            minLength: 2,
            maxLength: 30,
        }}
        messages={{
            // Custom validation messages 
            required: 'Please don\'t leave me empty',
            minLength: condition => `Please use a minimum of ${condition} characters`,
        }}
        onSubmit={(val) => { // handle submit }} 
    >
        <InlineForm.Field resetOnEscape>
            <label htmlFor="inlineform-name">Name</label>
            <input id="inlineform-name" />
        </InlineForm.Field>
        <InlineForm.Errors /> // (optional) This will display the error messages 
        <InlineForm.Cancel> // (optional) This will reset your form when you click cancel 
            <button type="button">
                Cancel
            </button>
        </InlineForm.Cancel>
        <InlineForm.Submit> // (optional) This disables the submit button if the field isn't valid 
            <button type="submit">
                Save
            </button>
        </InlineForm.Submit>
);
 
export default YourInlineForm;

@withValidation({
    schema: {
        name: {
            required: true, // default validation 
            mustNotContainSpecialCharacters: { // custom validation 
                test: val => !(/[^a-zA-Z0-9]/).test(val),
                message: 'This field cannot contain special characters',
            },
        },
        // ... 
    }
})
// ... 

@withValidation({
    schema: {
        name: {
            required: true,
        },
        // ... 
    },
    messages: {
        required: 'This field is required.',
    }
})
// ... 

this.props.setInitialModel({
    firstname: 'Foo',
    lastname: 'Bar',
});

this.props.isTouched;

this.props.getSchema('lastname');

// console.log(this.props.getSchema('lastname')); 
{
    errors: [{
        condition: true,
        rule: 'required'
    }],
    isTouched: true,
    isValid: false,
}

<button disabled={!this.props.schema.isValid && !this.props.isTouched} />

// console.log(this.props.schema); 
{
    isValid: true,
    fields: {
        firstname: {
            errors: [],
            isTouched: true,
            isValid: true
        },
        lastname: {
            errors: [{
                condition: true,
                rule: 'required'
            }],
            isTouched: true,
            isValid: false,
        }
    }
}

this.props.validateForm();

this.props.setProperty('firstname', 'foo');

this.props.setModel({
    firstname: 'bar',
    lastname: 'foo',
});

<button type="submit" disabled={this.props.isButtonDisabled} />

this.props.resetValidation();

// console.log(this.props.schema); 
{
    isValid: null,
    fields: {
        firstname: {
            errors: [],
            isTouched: false,
            isValid: null
        },
        // ... 
    }
}

this.props.clearForm();

this.props.resetForm();

this.props.setTouched();

this.props.setUntouched();

this.props.model;

{
    firstname: {
        isTouched: false,
        value: 'Foo'
    },
    lastname: {
        isTouched: true,
        value: 'Bar'
    },
    phone: {
        isTouched: false,
        value: '0123456789'
    }
}