arrays for use w/ tcomb-form

[benmonro]

I'm trying to have a json schema document be converted into tcomb so it can then be used by tcomb-form. I need to have an array or list that drives a select box and I need some guidance on how to do define the property correctly in the json-schema. I have the following in my schema & options respectively.

//in schema:
            "polkey":{
                "type":"string",
                "enum":["key1", "key2","key3"]
            }

//in options:
            "polkey":{
                "label":"Policy",
                "options":[
                    {"value":"key1", "text":"option 1"},
                    {"value":"key2", "text":"option 2"},
                    {"value":"key3", "text":"option 3"}
                ]
            }

// in value:
   "polkey":"key2"

so when I do this, I get a select box shown, but the 2nd option is not selected. So my question is, what is the correct way to A) define the options for the select - using the json schema or using the options? B) how do I set the value such that the 2nd option is pre-selected (in this case key2)?

[gcanti]

A)

The options. AFAIK there's no place in JSON Schema where to put enums descriptions

B)

This works for me

import transform from 'tcomb-json-schema';

const myschema = {
  "type": "object",
  "properties": {
    "polkey": {
        "type":"string",
        "enum":["key1", "key2","key3"]
    }
  }
};

const Schema = transform(myschema);

const options = {
  fields: {
    "polkey":{
        "label":"Policy",
        "options":[
            {"value":"key1", "text":"option 1"},
            {"value":"key2", "text":"option 2"},
            {"value":"key3", "text":"option 3"}
        ]
    }
  }
};

const value = {
  polkey: 'key2'
};

var App = React.createClass({

  onSubmit(evt) {
    evt.preventDefault();
    var value = this.refs.form.getValue();
    if (value) {
      console.log(value);
    }
  },

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <t.form.Form
          ref="form"
          type={Schema}
          options={options}
          value={value}
        />
        <button type="submit" className="btn btn-primary">Save</button>
      </form>
    );
  }

});

[benmonro]

is the option pre selected? I'm basically doing the same thing but it does not select that 2nd option...

[gcanti]

is the option pre selected?

Yes it is

[benmonro]

ok I think I see why it's not working for me and I think it may be a bug in tcomb-form. If I define my schema, options & values in javascript it works fine. However, we are going to be sending this across as messages so I am for testing purposes I'm storing my schema, options & value in a single json file like below.

{
"schema":{ ... },
"options": { ... },
"value": { ... }
}

then in my Index.jsx I have the following:

var React = require('react');
var t = require('tcomb-form');
var Form = t.form.Form;
var transform = require('tcomb-json-schema');
var path = require('path');
var fs = require('fs');
var jsonString = fs.readFileSync(path.join(__dirname, '../../samples/simpleForm.json'), 'utf8');

var sample = JSON.parse(jsonString); // require('../../samples/simpleForm');
var baseComponent = require( '../../../../shared/BoilerPlate/BaseComponent' );
var schema = transform(sample.schema);
var options = sample.options;
var Component = baseComponent({
    render() {
        return (
            <Form
                options={options}
                ref="form"
                type={schema}
                value={sample.value}
            />)
    }
});

module.exports = Component;

Doing things this way causes the option to not be selected....

[gcanti]

If I define my schema, options & values in javascript it works fine

I don't see how it could be a bug in tcomb-form

[benmonro]

I think it's in the way it sets the selected value of the options. Would a
failing test help?
On Thu, Sep 10, 2015 at 10:41 PM Giulio Canti notifications@github.com
wrote:

If I define my schema, options & values in javascript it works fine

I don't see how it could be a bug in tcomb-form

—
Reply to this email directly or view it on GitHub
#12 (comment)
.

[gcanti]

Would a failing test help?

Yes, thanks!