keep updating for mobx-form-validate
npm install mobx-form-validationValidation Helper for form in Mobx
==================================
``bash`
npm i mobx-form-validation --save
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.
`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
`
`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}
$3
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
)
}
}
`$3
You can define your own
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;
]
}
`$3
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
});
// Do not re-render.
export default class Login extends React.Component {
form = new LoginForm();
render() {
return (
Submit
)
}
}
`$3
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();
}
}
``