This is an opinionated way to simplify working with forms and Mobx. It provides a straightforward API for keeping states, validating user inputs, and handling API errors. It's important to note this can be used with React but also anywhere else where you can use Mobx.
Here is how you would create a simple registration form that has:
- a submit action that sends the data to an API endpoint
- has a username field that has to be filled in and needs to be an email
- a password that isn't like the username, has a minimum length of 6, and is required
import {FormStore} from 'mobx-form-store';
const store = new FormStore({
submitAction(formData) {
return fetch('https://example.org/api/register', {
data: JSON.stringify(formData)
}).then((data) => data.json());
},
fields: {
username: {
validators: {
required: true,
email: true
}
},
password: {
validators: {
required: true,
minLength: 6,
notEquals: 'username'
}
}
},
validators: {
notEquals(field, targetField) {
const targetValue = this.fields[targetField].value;
return field.value !== targetValue;
}
}
});
const {username, password} = store.fields;
username.value = 'test@example.org';
password.value = 'Pa$$w0rd';
store.submit().then((response) => {
// e.g. response.token
});The MIT License
