https://github.com/tdzl2003/mobx-form-validate
https://github.com/tdzl2003/mobx-form-validate
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tdzl2003/mobx-form-validate
- Owner: tdzl2003
- Created: 2016-12-17T16:03:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-12T03:37:36.000Z (over 8 years ago)
- Last Synced: 2025-06-10T03:33:44.769Z (4 months ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 31
- Watchers: 2
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Validation Helper for form in Mobx
==================================
## Installation
```bash
npm i mobx-form-validate --save
```
## API
### @validate(regexp[, message])
### @validate((value, this)=>string|undefined)
Use this decorator on your properties, which must be aslo decorated by @observable or @computed.
This will add a hidden `@computed` field named with 'validateError' prefix in camel-case,
which should be undefined when validation successed, or be a string which indicate error message.
This will also add a computed field named 'validateError', which indicate any error occuered in this form.
This will also add a computed field named 'isValid', whether this form has no validation error.
## Usage
### Create a observable class with validation
```js
import {observable, computed} from 'mobx';
import validate from 'mobx-form-validate';
import Session from '../../../logics/session';
export default class LoginForm {
@observable
@validate(/^1\d{10}$/, 'Please enter a valid mobile')
mobile = '';
@observable
@validate(/^.+$/, 'Please enter any password')
pwd = '';
// Bind this for future use.
submit = () => {
return Session.login(this, 'user');
}
}
const form = new LoginForm();
console.log(form.validateErrorMobile); // Please enter a valid mobile
console.log(form.validateError); // Please enter a valid mobile
console.log(form.isValid); // false
```
### Use with react
```js
import React from 'react';
import { observer } from 'mobx-react';
import LoginForm from './LoginForm';
@observer
export default class Login extends React.Component {
form = new LoginForm();
render() {
return (
Mob: this.form.mobile = ev.target.value}/>
{this.form.validateErrorMobile}
Pwd: this.form.pwd = ev.target.value}/>
{this.form.validateErrorPwd}
Submit
)
}
}
```
### Use with react-native
Just replace all html element with react-native components.
```js
import React from 'react';
import { observer } from 'mobx-react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import LoginForm from './LoginForm';
@observer
export default class Login extends React.Component {
form = new LoginForm();
render() {
return (
Mob: this.form.mobile = text}/>
{this.form.validateErrorMobile}
Pwd: this.form.pwd = text}/>
{this.form.validateErrorPwd}
Submit
)
}
}
```
### Custom valid condition
You can define your own `isValid` getter, with any additional condition:
```js
class MyForm {
startAt = new Date();
@computed
get isValid() {
// This form is only submittable after 10 seconds.
return !this.validateError && new Date() - this.startAt > 10000;
]
}
```
### Optimize
To avoid re-render of the whole form, you can create a item component to observe
a single field:
```js
import React from 'react';
import { observer } from 'mobx-react';
import LoginForm from './LoginForm';
import camelCase from 'camelcase';
// Only re-render when this field changes.
const Input = observer(function Input({label, form, name, ...others}){
return (
form[name]=ev.target.value} {...others}/>
{form[camelCase('validateError', name)]}
)
});
// Only re-render when the whole form become valid or invalid.
const Submit = observer(function Submit({form, children}){
return {children}
});
// Do not re-render.
export default class Login extends React.Component {
form = new LoginForm();
render() {
return (
Submit
)
}
}
```
### Sub-form
You can create sub-form or even sub-form list in your form:
```js
class SubForm {
@observable
@validate(/.+/)
field1 = '';
@observable
@validate(/.+/)
field2 = '';
}
class Item {
@observable
@validate(/.+/)
field3 = '';
}
class MainForm {
@observable
haveSubForm = false;
@observable
@validate((value, this)=>this.haveSubForm && value.validationError)
subForm = new SubForm();
@observable
@validate((value) => value.map(v=>v.validationError).find(v=>v))
itemList = [];
@action
addItem() {
this.itemList.push(new Item());
}
@action
clearItem() {
this.itemList.clear();
}
}
```