gcanti / tcomb-form

Forms library for react
https://gcanti.github.io/tcomb-form
MIT License
1.16k stars 136 forks source link

add hidden info to a list item #176

Closed cglantschnig-zz closed 9 years ago

cglantschnig-zz commented 9 years ago

I have a structure like you can see below. It looks like expected. But I also need an informations if the stage is newly created or if it just got updated. Best would be if I could add my "id" to the "stage"-"struct" but it should be hidden.

var Location = t.struct({
    title: t.Str,
    description: t.Str,
    latitude: t.Num,
    longitude: t.Num,
    stages: t.list(t.struct({
        title: t.Str
    ))
});

var options = options: {
    fields: {
      stages: {
        disableOrder: true
      }
    }
}
gcanti commented 9 years ago

Best would be if I could add my "id" to the "stage"-"struct" but it should be hidden.

Yes you can (https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#type-attribute):

Example

import React from 'react';
import t from 'tcomb-form';

var Location = t.struct({
  // I omit the other fields for simplicity
  stages: t.list(t.struct({
    isNew: t.maybe(t.Str), // hidden field
    title: t.Str
  }))
});

var options = {
  fields: {
    stages: {
      disableOrder: true,
      item: {
        fields: {
          isNew: { type: 'hidden' }
        }
      }
    }
  }
}

var value = {
  stages: [{title: 'a', isNew: 'nein'}, {title: 'b', isNew: 'nein'}]
};

const App = React.createClass({

  onSubmit(evt) {
    evt.preventDefault();
    var value = this.refs.form.getValue();
    if (value) {
      var newStages = value.stages.filter(function (stage) {
        return stage.isNew !== 'nein';
      });
      console.log(newStages);
    }
  },

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

});
cglantschnig-zz commented 9 years ago

Thank you! It worked :+1: