A complete component for building React Forms.
## Features
- Atomic Forms integrates with [Validator](https://www.npmjs.com/package/validator) for quick validations.
- Custom functions for validation, including validating against other form fields.
- Validate/Gather form data as users inputs data.
- Populate forms with initial data.
- Use multiple validations on a single input.
- Recieve and display multiple validation message errors.
## Video
[](http://www.youtube.com/watch?v=r_tljStPKmk)
## Installation
```sh
npm install atomic-form
```
Then with a module bundler or webpack, use as you would anything else:
```js
// using an ES6 transpiler
import AtomicForm from 'atomic-form';
// not using an ES6 transpiler
var AtomicForm = require('atomic-form');
```
## AtomicForm Props
- **doSubmit**: A callback that will be used when all validations are successful. The callback will be invoked with a single parameter containing formData.
- **afterValidation**: A callback that will be used when any validations fail. The callback will have a single parameter containing form validation errors/messages.
- initialData: (Optional) An object that will be used to populate the form with initial data.
- getState: (Optional) Allows for complete override of the getState method.
- updateFormData: (Optional) Allows for complete override of the updateFormData method.
- collectFormData: (Optional) Allows for complete override of the formData method.
## What's it look like?
```js
import AtomicForm from 'atomic-form';
import UserAction from './actions/user';
export default class RegisterForm extends React.createClass({
constructor(props, context){
super(props, context);
this.state = this.getState();
}
getState() {
//Optional - Set form initial data.
return {
initialData: {
email: "test@example.com",
password: "example",
confirmPassword: "example"
}
}
}
afterValidation(formValidations) {
//Callback after validation fails.
this.setState({validations: formValidations});
}
doSubmit(formData) {
//Callback after a user hits submit and the formdata is all valid.
UserAction.register({
User: {
email: formData.email,
password: formData.password
}
});
}
componentWillUnmount() {
//Optional - We can get the formData from our form anytime.
var formData = this.refs.MainForm.formData();
}
onInputChange() {
//Optional - If we want to validate the form from an onChange callback.
var formData = this.refs.MainForm.formData();
var formValidations = this.refs.MainForm.validateForm(formData);
this.setState(validations: formValidations);
}
validationMessage(field) {
if (this.state.validations && this.state.validations[field]) {
if (!this.state.validations[field].isValid) {
return _.map(this.state.validations[field].message, (message) => {
return {message};
});
}
}
return ;
}
render() {
return