
FormAPI render prop methods
<table>
	<thead>
	<tr>
		<th>Method</th>
		<th>Parameters</th>
		<th>Description</th>
	</tr>
	</thead>
	<tbody>
		<tr>
    		<td>getValue</td>
    		<td>path</td>
    		<td>Retrieves a value from Form internal state</td>
    	</tr>
		<tr>
    		<td>hasError</td>
    		<td>path</td>
    		<td>Returns a boolean indicating whether there is a validation error for a Form data value</td>
    	</tr>
		<tr>
    		<td>getError</td>
    		<td>path</td>
    		<td>Gets the validation error for a given Form data value</td>
    	</tr>
		<tr>
			<td>setValue</td>
			<td>path, value, [cb]</td>
			<td>Updates a state value in Form, and fires an optional callback if supplied</td>
		</tr>
		<tr>
			<td>setValues</td>
			<td>object, [cb]</td>
			<td>Merges an object into state, and fires an optional callback if supplied</td>
		</tr>
		<tr>
			<td>onChange</td>
			<td>event, [cb]</td>
			<td>Fires the onChange handler, which updates Form state and runs validation. Accepts a callback</td>
		</tr>
		<tr>
			<td>onBlur</td>
			<td>event</td>
			<td>Fires the onBlur handler, which updates Form touched/pristine state and runs validation</td>
		</tr>
		<tr>
			<td>isTouched</td>
			<td>path</td>
			<td>Indicates whether a form value has been modified</td>
		</tr>
		<tr>
			<td>runFieldValidation</td>
			<td>path, value</td>
			<td>Runs field validation for a given element</td>
		</tr>
		<tr>
			<td>resetForm</td>
			<td>n/a</td>
			<td>Resets form data back to initial state, undoing any edits</td>
		</tr>
	</tbody>
</table>

FormAPI render prop properties
<table>
	<thead>
	<tr>
		<th>Property</th>
		<th>Description</th>
	</tr>
	</thead>
	<tbody>
		<tr>
			<td>canSubmit</td>
			<td>Indicates whether the form contains changes, and is valid</td>
		</tr>
		<tr>
			<td>isPristine</td>
			<td>Indicates whether the form contains changes</td>
		</tr>
		<tr>
			<td>isValid</td>
			<td>Indicates whether the form data is valid</td>
		</tr>
		<tr>
			<td>isSubmitting</td>
			<td>Indicates whether the form onSubmit handler is running</td>
		</tr>
		<tr>
			<td>formData</td>
			<td>Provides access to form data including latest edits</td>
		</tr>
		<tr>
			<td>validationData</td>
			<td>Provides access to the validationData object</td>
		</tr>
	</tbody>
</table>

Form:
```js
<Form
	validate={(formData, validationData) => validationData.name}
	onSubmit={(e, data) => {
		e.preventDefault();
		alert(JSON.stringify(data));
	}}
	formData={{
		name: 'name',
		nested: {
			name: 'test'
		}
	}}
	fieldValidation={{
		name: val => val === 'name' ? true : 'Only "name" is valid...'
	}}
>
	{FormApi => (
		<div>
			<p>Data: {JSON.stringify(FormApi.formData)}</p>
			<p>Validation: {JSON.stringify(FormApi.validationData)}</p>
			<Input 
				name="name"
				value={FormApi.getValue('name')}
				onChange={FormApi.onChange}
				onBlur={FormApi.onBlur}
			/>
			<Validation	visible={FormApi.hasError('name')}>
				{FormApi.getError('name')}
			</Validation>
			<div>
				<BrandButton disabled={!FormApi.canSubmit} type="submit">Submit</BrandButton>
				<OutlineButton disabled={FormApi.isPristine} type="button" onClick={FormApi.resetForm}>Reset</OutlineButton>
			</div>
		</div>
	)}
</Form>
```
Error handling:

```js
<Form
	onSubmit={(e) => {
		e.preventDefault();

		return Promise.reject(new Error('That didn\'t go well'))
	}}
>
	{(FormApi) => (
		<div>
			<Input name="name" value={FormApi.getValue('name')} onChange={FormApi.onChange} />
			<BrandButton type="submit">Submit</BrandButton>
			<FormApi.ServerValidation />
		</div>
	)}
</Form>
```

Custom validation to prompt user to fill fields in

```js
<Form
	onSubmit={(e) => {
		e.preventDefault();
	}}

    validate={(formData, validationData) => {
        if (!formData.name) {
            return 'Please fill in the field'
        }

        return true;
    }}
>
	{(FormApi) => (
		<div>
			<Input name="name" value={FormApi.getValue('name')} onChange={FormApi.onChange} />
            <Input name="password" value={FormApi.getValue('password')} onChange={FormApi.onChange} />
			<BrandButton type="submit">Submit</BrandButton>
			<FormApi.ServerValidation />
		</div>
	)}
</Form>
```

Custom validation without using the FormApi onChange method

```js
const onchangefunc = (e, FormApi) => {
	const { name, value } = e.target;

	FormApi.runFieldValidation(name, value);
};


<Form
	onSubmit={() => {}}
	formData={{ mycustominput: '' }}
	fieldValidation={{
		mycustominput: () => 'try again'
	}}
>
	{FormApi => (
		<div>
			<input
				name="mycustominput"
				onChange={e => {
					onchangefunc(e, FormApi);
				}}
			/>
		<Validation visible={FormApi.hasError('mycustominput')}>
			{FormApi.getError('mycustominput')}
		</Validation>
		<BrandButton disabled={!FormApi.canSubmit}>Submit</BrandButton>
		</div>
	)}
</Form>
```
