Package Exports

goten-react-form

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (goten-react-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Goten Form

Goten Form is a react component that facilitates the validation of the Goten components.

Install

npm install -s goten-react-form

Usage

var GotenForm = require('goten-react-form').GotenForm; // ES5
 
import { GotenForm } from 'goten-react-form'; // ES6


<GotenForm
    onSuccess = {() => console.log("onSuccessMethod")}
/>
    <Component1>
        <GotenComponent/>
    </Component1>
    <GotenComponent/>
    <Component2/>
</GotenForm>

Example of use

With buttonComponent

import React, { Component } from 'react'
import { GotenTextField } from 'goten-react-text-field'
import { GotenForm } from 'goten-react-from'

export default class App extends Component {
    render() {
        return (
            <GotenForm
                onSuccess = {()=> console.log("SUCCESS")}
                onError = {() => console.log("ERROR")}
                buttonComponent = {
                    <input
                        type='submit'
                        value='Validate Form'
                    />
                }
            >
                <div className='title'>TITLE</div>
                <table>
                    <tbody>
                        <tr>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    label={'Date Pattern'}
                                    type={'text'}
                                    pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    errorMessage={'Please inset a text using the correct pattern'}
                                    errorRequiredMessage={'This field is required'}
                                    required={true}
                                    showError={true}
                                />
                            </th>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'Insert a email'}
                                    label={'Email'}
                                    type={'email'}
                                    showError={true}
                                />
                            </th>
                        </tr>
                    </tbody>
                </table>
            </GotenForm>
        )
    }
}

Without buttonComponent

import React, { Component } from 'react'
import { GotenTextField } from 'goten-react-text-field'
import { GotenForm } from 'goten-react-from'

export default class App extends Component {
    this.refForm = React.createRef()

    render() {
        return (
            <GotenForm
                onSuccess = {() => console.log("SUCCESS")}
                onError = {() => console.log("ERROR")}
                ref = {this.refForm}
            >
                <div className='title'>TITLE</div>
                <table>
                    <tbody>
                        <tr>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    label={'Date Pattern'}
                                    type={'text'}
                                    pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    errorMessage={'Please inset a text using the correct pattern'}
                                    errorRequiredMessage={'This field is required'}
                                    required={true}
                                    showError={true}
                                />
                            </th>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'Insert a email'}
                                    label={'Email'}
                                    type={'email'}
                                    showError={true}
                                />
                            </th>
                        </tr>
                    </tbody>
                </table>
                <input
                    type='submit'
                    value='Validate Form'
                    onClick={() => this.refForm.current.validate()}
                />
            </GotenForm>
        )
    }
}

Props

Prop Name	Type	Required	Description
onSuccess	Function	True	This function is executed when all Goten components are validated correctly.
onError	Function	False	This function is executed when all Goten components are validated correctly.
buttonComponent	Component	False	Component that will be clicked.

Methods

validate()

Validate all Goten components inside the GotenForm.

Contributions

To contribute to this package, we propose the following workflow:

Add an issue with related tags to describe the contribution (is it a bug?, a feature request?).
Branch your solution from develop, with the name as #<issue_number>_<descriptive_name>.
Send a pull request and wait for approval/corrections.