tcomb-form icon indicating copy to clipboard operation
tcomb-form copied to clipboard

How to setup Dynamic Keys?

Open jdarling opened this issue 7 years ago • 1 comments

Version

  • tcomb-form v0.9.16
  • react v15.5.4

Requested behaviour

I'm trying to figure out how I can have a flexible object type. Basically a hash of sub objects.

As an example I might have something like:

{
  routes: {
    '/foo': {
      method: 'GET'
      ...
    },
    '/bar': {
      method: 'GET'
    }
  }
}

My first thought was to convert each to a list and then have the list maintain the key, then on submit validate that there are no duplicate keys, reform to the expected output, and return. But that seems dirty.

Any ideas?

jdarling avatar Apr 19 '17 16:04 jdarling

Seems like this should be done with dict, but that doesn't work :(

import TForm from 'tcomb-form';
const FormRender = TForm.form.Form;

const Phone = TForm.dict(
  TForm.String,
  TForm.Number
);

const Person = TForm.struct({
  firstName: TForm.String,
  lastName: TForm.String,
  phones: Phone
});

const App = React.createClass({
  onSubmit(evt) {
    evt.preventDefault()
    const value = this.refs.form.getValue()
    if (value) {
      console.log(value)
    }
  },

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <FormRender type={Person} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Save</button>
        </div>
      </form>
    )
  }
});

That fails with the error:

Uncaught TypeError: [tcomb] [tcomb-form] unsupported kind dict for type {[key: String]: Number}

jdarling avatar Apr 20 '17 17:04 jdarling