foxhound87/mobx-react-form-demo

Demo of MobX React Form

mobx-react-form-demo's Issues

Demo site not working

The link to online demo results in...

502 error occured with your deployment.

Dependencies breaking

Hi, I'm getting the following error on npm install.

npm WARN [email protected] requires a peer of react@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.

Updates to react-select creatable example

Hey @foxhound87,

Just found your awesome library, great work and thanks!!

I've been trying to implement your react-select creatable example this weekend but it's slightly out of date with current best practices. From what I can see Lodash now advise not to use _.chain anymore based on this article. Based on that I was trying to reimplement your demo code but not sure how to reimplment this...

const $values = _.chain(values)
          .mapValues('value')
          .values()
          .value();

piece of code correctly. So far I've ended up with this...

// Get the entered value
const v = lodashMapValues(values, o => o.value);
const v2 = lodashValues(v);
const $values = v2.filter(x => x !== undefined);

I'm mapping over the values to get the value, then converting it to an array, then finally removing the undefined items. I'm not sure if that is the correct intent of the original though?

Then with the rest of the code, I don't want to have the extra input fields underneath the select field as in the example, would that just be a case of removing these lines...

dynamicFields.$(item).set('placeholder', item);
dynamicFields.$(item).set('bindings', 'MaterialTextField');

Appreciate any help you can offer.

Thanks

Add example test

Hello,

It'd be great to see how to integrate mobx-react-form properly into unit tests like jest. Of course it doesn't need to be exhaustive, but offer a solid example to take it from there.

Thanks for your work,
Jo

Form.error doesn't update

When I submit my form, OnError hook event executes and gets form.errors() correctly, however form.validator.error is undefined.

My form component:

import React from 'react';
import { observer } from 'mobx-react';

export default observer(({ form }) => (
  <form onSubmit={form.onSubmit}>
    <label htmlFor={form.$('username').id}>
      {form.$('username').label}
    </label>
    <input {...form.$('username').bind()} />
    <button type="submit" onClick={form.onSubmit}>Submit</button>
    <p>{form.error}</p>
  </form>
));

My form:

import { dispatch } from 'rfx-core';
import validatorJs from 'validatorjs';
import MobxReactForm from 'mobx-react-form';
import _ from 'lodash';

const plugins = { dvr: validatorJs };

const hooks = {
  onSuccess(form) {
    return dispatch('document.add', form.values())
      .then(() => form.clear())
      .then(() => dispatch('ui.snackBar.open', 'Document added'))
      .catch((err) => {
        dispatch('ui.snackBar.open', err.message);
      });
  },
  onError(form) {
    const errors = _.filter(form.errors(), err => err !== null);
    const keys = _.keys(errors);
    console.log(this.validator);
    dispatch('ui.snackBar.open', errors[_.head(keys)]);
  },
};

const fields = [{
  name: 'username',
  label: 'Username',
  placeholder: 'Insert username',
  rules: 'required|string|between:5,25',
}];

const form = new MobxReactForm({ fields }, { plugins, hooks });

export default form;

Where I use my form component:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { inject, observer } from 'mobx-react';
import { dispatch } from 'rfx-core';
import { translate } from 'react-i18next';
import { authorize } from '@/utils/authorize.hoc';
import Upload from '../components/form/UploadDocument';

@inject('store') @observer @authorize
class UploadDocument extends Component {
  static fetchData() {}

  static propTypes = {
    store: PropTypes.object,
    t: PropTypes.func,
  };

  componentWillMount() {
    const { t } = this.props;
    dispatch('ui.appBar.setTitle', t('title.upload'));
  }

  render() {
    const { ui } = this.props.store;
    return (
      <div className="main">
        <Helmet title={ui.appBar.title} />
        <Upload form={ui.settings.uploadForm} />
      </div>
    );
  }
}

export default translate('settings')(UploadDocument);

question: new material-mobx-react-form library?

First of all, huge thanks to you @foxhound87 for making this library. I just started using it and it was a great experience. I'd like to replace my usage of formsy-react/formsy-material-ui with your library. I'm thinking about creating a new repo similar to formsy-material-ui, but instead combining material-ui and mobx-react-form. I was planning to do this internally, but I thought it would make sense to create a public repo/npm package that maybe someone else can use.

My overall goal would be to create a library of material-ui components that can be passed a mobx-react-form field and automatically update the errorText, etc.

I was planning to start with the code you've already written in this demo:

• https://github.com/foxhound87/mobx-react-form-demo/blob/master/src/components/inputs/MaterialTextField.jsx
• https://github.com/foxhound87/mobx-react-form-demo/blob/master/src/components/inputs/MaterialToggle.jsx

Usage would be just like in your demo code:

<MaterialTextField field={form.$('fieldName')} />

My questions are:

• is there any reason I should not do this?
• are there any specific naming conventions or code conventions for mobx-react-form that I should be aware of when creating these wrapped components?
• when creating the demo, did you run into any hiccups with material-ui that I should know before I start?

radio example

Hello @foxhound87 ,

Can you make on codesanbox and on the doc , a example with radiobutton please?

Thank you

_myForm2.default is not a constructor

Hi,

mobx and react newbie here...I'm trying to build a super simple example to catch the basics of this library and realize if this could be used by my team.

I've started from a creat-react-app, modded to be a mobx (plus decorators) project this way:
https://swizec.com/blog/mobx-with-create-react-app/swizec/7158

Then, I've installed' mobx-react-form' and 'validator.js' via npm. That should fit the requirements.

After that, i've followed the instruction of the "Automagically..." page, but something went wrong.

I've made a MyForm.js that looks like this:

import MobxReactForm from 'mobx-react-form';

import validatorjs from 'validatorjs';

const plugins = { dvr: validatorjs };
 

const fields = [{
  name: 'email',
  label: 'Email',
  placeholder: 'Insert Email',
  rules: 'required|email|string|between:5,25',
}, {
  name: 'password',
  label: 'Password',
  placeholder: 'Insert Password',
  rules: 'required|string|between:5,25',
}, {
  name: 'passwordConfirm',
  label: 'Password Confirmation',
  placeholder: 'Confirm Password',
  rules: 'same:password',
}];
class MyForm extends MobxReactForm {

  onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  }

  onError(form) {
    // get all form errors
    console.log('All form errors', form.errors());
    // invalidate the form with a custom error message
    form.invalidate('This is a generic error message!');
  }
}

export default new MyForm({ fields }, { plugins });

Then made another file called mobx-forms-test.js that contains:

import validatorjs from 'validatorjs';
import MyForm from './myForm'; 
import React from 'react';
import { observer } from 'mobx-react';


 
const form = new MyForm();
export default observer(({ form }) => (
  <form onSubmit={form.onSubmit}>
    <label htmlFor={form.$('username').id}>
      {form.$('username').label}
    </label>
    <input {...form.$('username').bind()} />
    <p>{form.$('username').error}</p>
 

    <button type="submit" onClick={form.onSubmit}>Submit</button>
    <button type="button" onClick={form.onClear}>Clear</button>
    <button type="button" onClick={form.onReset}>Reset</button>

    <p>{form.error}</p>
  </form>
));

And finally in main App.js I've done the final import:

import React, { Component } from 'react';
import FormMobx from './mobx-forms-test' 
import './App.css'; 
 
class App extends Component {
	
  render() {
    return (
	
      <div className="App">
	
			<div className="App-header">
			  <img src={logo} className="App-logo" alt="logo" />
			  <h2>Welcome to React</h2>
			</div>
			
			<p className="App-intro">
			  To get started, edit <code>src/App.js</code> and save to reload.
			</p>  
				<FormMobx/> 
	   </div> 
    );
  }
}

export default App;

But the console of Chrome reports this error:

Uncaught TypeError: _myForm2.default is not a constructor
    at Object.<anonymous> (mobx-forms-test.js:8)
    at __webpack_require__ (bootstrap c055823…:555)
    at fn (bootstrap c055823…:86)
    at Object.<anonymous> (App.js:7)
    at __webpack_require__ (bootstrap c055823…:555)
    at fn (bootstrap c055823…:86)
    at Object.<anonymous> (index.js:3)
    at __webpack_require__ (bootstrap c055823…:555)
    at fn (bootstrap c055823…:86)
    at Object.<anonymous> (bootstrap c055823…:578)
(anonymous) @ mobx-forms-test.js:8
__webpack_require__ @ bootstrap c055823…:555
fn @ bootstrap c055823…:86
(anonymous) @ App.js:7
__webpack_require__ @ bootstrap c055823…:555
fn @ bootstrap c055823…:86
(anonymous) @ index.js:3
__webpack_require__ @ bootstrap c055823…:555
fn @ bootstrap c055823…:86
(anonymous) @ bootstrap c055823…:578
__webpack_require__ @ bootstrap c055823…:555
(anonymous) @ bootstrap c055823…:578
(anonymous) @ bootstrap c055823…:578
webpackHotDevClient.js:198 ./src/App.js

c:\Users\Black Jack\Desktop\QuickWebDevelop\mobxtest\src\App.js
  6:8  warning  'RemoteStoreInsertRow' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

printWarnings @ webpackHotDevClient.js:198
handleWarnings @ webpackHotDevClient.js:211
connection.onmessage @ webpackHotDevClient.js:258
EventTarget.dispatchEvent @ eventtarget.js:49
(anonymous) @ main.js:274
SockJS._transportMessage @ main.js:272
EventEmitter.emit @ emitter.js:44
WebSocketTransport.ws.onmessage @ websocket.js:35

Can u point me to the right direction?

Thanks!

Cannot find module "../../modules/devtools/src"

i got this issue, while running the Project

cross-env for Windows compatibility

The npm scripts don't work, because NODE_ENV=dev web-pack... isn't a proper Windows command.

Using cross-env instead works:

"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --port 8888",
    "prod:build": "cross-env NODE_ENV=production webpack",
    "prod:start": "cross-env NODE_ENV=production node ./server.js",
    "publish": "cd build && rm -rf .git && git init && git commit --allow-empty -m 'update' && git checkout -b gh-pages && git add . && git commit -am 'update' && git push [email protected]:foxhound87/mobx-react-form-demo.git gh-pages --force"
  },

https://stackoverflow.com/a/35308102/383124

question: how to handle onChange events

hi
i am trying the mobx react form and i didn't find anything abouthandling the input onChange events

this is my code
`
import MobxReactForm from 'mobx-react-form';
import validatorjs from 'validatorjs';

const plugins = { dvr: validatorjs };

const fields = [{
name: 'username',
label: 'Username',
placeholder: 'Insert Username',
rules: 'required|email|string|between:5,25',
}, {
name: 'password',
label: 'Password',
placeholder: 'Insert Password',
rules: 'required|string|between:5,25',
}, {
name: 'passwordConfirm',
label: 'Password Confirmation',
placeholder: 'Confirm Password',
rules: 'same:password',
}];

class MyForm extends MobxReactForm {

onSuccess(form) {
    alert('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
}

onError(form) {
    // get all form errors
    console.log('All form errors', form.errors());
    // invalidate the form with a custom error message
    form.invalidate('This is a generic error message!');
}

}

const form = new MyForm({ fields }, { plugins });

export default form;
`import React from 'react';
import { observer } from 'mobx-react';

export default observer(({ field, type = 'text', placeholder = null }) => (

{field.label}

<input
className="input-reset ba b--black-10 br1 pa2 mb2 db w-100 f6"
aria-describedby="name-desc"
{...field.bind({ type, placeholder }) }
/>

{field.error}

)); import React from 'react';
import { observer } from 'mobx-react';
import MobxReactFormDevTools from 'mobx-react-form-devtools';
import Input from './SimpleInput';
import form from "./mobxReactForm";

MobxReactFormDevTools.register({
form,
});

// select form to show into the devtools
MobxReactFormDevTools.select('form');

// open the devtools (closed by default)
MobxReactFormDevTools.open(true);

const App = observer(({Form}) => (

<Input field={form.$('username')} />

    <p>{form.$('username').error}</p>

    ...

<button type="submit" onClick={form.onSubmit}>Submit</button>
    <button type="button" onClick={form.onClear}>Clear</button>
    <button type="button" onClick={form.onReset}>Reset</button>

    <p>{form.error}</p>
  </form>
  <MobxReactFormDevTools.UI />
  </div>  

)
)

export default App;

`
any help would be appreciated !

resetValidation is not a function

I found a bug. It can be reproduced in your NestedFields demo online as well.
In the Hobbies field, if a text field has focus (cursor in it), and you click the Delete button for that focused field, an error in the console will appear. g.resetValidation is not a function. In my own app, when doing the same thing, i get the same error Validator.js Uncaught (in promise) TypeError: $field.resetValidation is not a function

The same error occurs with a normal <input type="text" {...field.bind()} />

If you remove focus (blur) the textfield then click delete there is no error.

Can not install app....

Hello @foxhound87 ,

I got a message:

$ git submodule update
Cloning into 'C:/mobx-react-form-demo/modules/devtools'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:foxhound87/mobx-react-form-devtools.git' into submodule path 'C:/mobx-react-form-demo/modules/devtools' failed
Failed to clone 'modules/devtools'. Retry scheduled
Cloning into 'C:/mobx-react-form-demo/modules/form'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:foxhound87/mobx-react-form.git' into submodule path 'C:/mobx-react-form-demo/modules/form' failed
Failed to clone 'modules/form'. Retry scheduled
Cloning into 'C:/mobx-react-form-demo/modules/devtools'...
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:foxhound87/mobx-react-form-devtools.git' into submodule path 'C:/mobx-react-form-demo/modules/devtools' failed
Failed to clone 'modules/devtools' a second time, aborting

not installing properly

npm gets issues and server not started and commend given below not working

form is undefined

Hi there.

I'm trying to implement the simple example, but form is always undefined coming in from the observer:

import React from 'react';
import { observer } from 'mobx-react';

import Input from '../../controls/SimpleInput';
import SubmitButton from '../../controls/SubmitButton';

import './style.css';

export default observer(({ form }) => (
  <form action="/psr" method="POST" onSubmit={form.onSubmit}>

yields

TypeError: Cannot read property 'onSubmit' of undefined
_class.<anonymous>
src/components/PSR/index.js:10
   7 | import './style.css';
   8 | 
   9 | export default observer(({ form }) => (
> 10 |   <form action="/psr" method="POST" onSubmit={form.onSubmit}>

Any ideas?

White space not trimmed in text fields

Hi @foxhound87, I've noticed there's no trimming for white space in the text fields :

The reason being is a white space in the end.

Is there a quick way to fix it, or I have to extend my own rule ?