show/hide field depending on value of another field

[benmonro]

I have 2 fields, 1 checkbox and 1 select. If the checkbox is selected I want to show the select. If unchecked I want to hide it. Is this possible?

[gcanti]

Remark. Since you can store type, options and value props in the component state you can get a great range of dynamic forms.

In your case:

var Country = t.enums.of('IT US', 'Country');

var Checkbox = t.struct({
  checkbox: t.Boolean
}, 'Checkbox');

var CheckboxAndSelect = t.struct({
  checkbox: t.Boolean,
  select: Country
}, 'CheckboxAndSelect');

var App = React.createClass({

  getInitialState() {
    return {
      value: {},
      type: Checkbox
    };
  },

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

  onChange(value) {
    this.setState({
      type: value.checkbox ? CheckboxAndSelect : Checkbox,
      value
    });
  },

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

});

[benmonro]

ah ok, this is interesting. My challenge at the moment is how to do this declaratively as we are passing the schema (json-schema) & options down as a message so any field can basically depend on any other field... I suppose I could come up with a way to wire that up myself, but was just curious if there was any thoughts you might have on how to go about this generically.

for example:

{
"options":{
  "fields": {
      "checkbox": {
      },
      "select": {
         "attrs":{"className":"hidden"},
         "dependency": {
               "field":"checkbox",
               "condition": { "value":"checked"}, 
                "toggle":{"attrs":{"className":"hidden"}}, 
         } 
      }
  }

}
}

In other words, a generic way to tell 'select' that when 'checkbox' has it's value 'checked' (or true etc) toggled....

[gcanti]

a generic way to tell 'select' that when 'checkbox' has it's value 'checked' (or true etc) toggled

I think there's not. My thoughts:

• JSON Schema is declarative but is weak. I chose tcomb as schema language because JSON Schema can't describe a great range of types (or it's way too verbose)
• now if you extend JSON Schema in order to describe those types (and remaining declarative) you end up with a giant DSL (and maybe you get a new programming language with JSON syntax). Then I would take a step further and embed a lisp :-D Lisp in Your Language
• maybe the best bet is to take the custom DSL route, i.e. a specialized DSL which serves exactly your needs and compiles to specialized Form instances

Just my 2c

[benmonro]

:+1: thanks for that.

Yeah my biggest concern w/ tcomb schema is that while it's great in javascript, how do you serialize it and send it as a message? for example, things like this:

  "factory":t.form.Textbox

that's good in javascript, but how do you send it as a message?