Field Type hidden

[rgnevashev]

const TestSchema = new SimpleSchema({
  plan: {
    type: String
  }
})

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.onSubmit = this.onSubmit.bind(this)
    this.state = {
    }
  }
  onSubmit(doc) {
    console.log(doc) // {} no plan property here
  }
  render() {
   const plan = "pro"
    return (
      <Form schema={TestSchema} type="function" onSubmit={this.onSubmit} >
         <Field fieldName="plan" fieldType="hidden" showLabel={false} value={plan} />
      </Form>
    )
  }
}

[nicolaslopezj]

Hm.. never tried to do that..

Maybe you should:

onSubmit(doc) {
  const plan = "pro"
  doc.plan = plan
}

[rgnevashev]

yep. this is a tempary solution.. but i think Form should be able grap hidden fields onSubmit and onChange..

[nicolaslopezj]

Maybe the correct way should be to create a Hidden field type

[rgnevashev]

couldn't agree more :) good idea

[nicolaslopezj]

But the value prop it's not supported by default. TheHidden field type should handle that too.

[vedovato]

Will this hidden fieldType be available on next release?

[nicolaslopezj]

We are not ready with the design of the feature. How would you use it?

[vedovato]

i'd like to use it like we're used on autoform and to make hidden the createdAt and updatedAt fields on automagically generated simple-react-form.

[fermuch]

@vedovato

createdAt: {
    type: Date,
    autoValue() {
      if (this.isInsert) {
        return new Date();
      } else if (this.isUpsert) {
        return {$setOnInsert: new Date()};
      }
      // Prevent user from supplying their own value
      return this.unset();
    }
  },
  updatedAt: {
    type: Date,
    autoValue() {
      if (this.isUpdate) {
        return new Date();
      }
    },
    denyInsert: true,
    optional: true
  },

That snippet adds you automagically the values for createdAt and updatedAt. It works because autoValues are called on simpleschema's clean function, and SRF calls it before doing an insert.

[vedovato]

Ya @fermuch, it works ilke a charm and you solved half of my problem. Thanks!
Would it be good to be able to make these fields hidden also so our user doesn't need to care about filling it. Let's wait this next release, hope this feature comes with it.

[fermuch]

export default class HiddenField extends FieldType {
  constructor(props) {
    super(props);
    this.state = { props.value || '' };
  }

  componentDidRender() {
    // the state should already be set by <Form>, but just in case...
    this.props.onChange(this.state.value);
  }

  componentDidUpdate(prevProps, prevState) {
    // inform <Form> of our new state.
    // this is useful so we can change the component state with props
    if (prevState.value !== this.props.value) {
      this.setState({value: this.props.value});
      this.props.onChange(this.props.value);
    }
  }

  render() {
    return (<div></div>);
  }
}

What's the problem with a Field like this one for your hidden input?

NOTE: I havent tested this code. Heck, I've written it purely on github so mostly surely it won't work, but I hope you get the idea.

[vedovato]

Not a problem at all, @fermuch. I just want to make it hidden so when i generate my automagical form based on simple-schema, the created and updatedAt fields get hidden. It's not useful for user to fill it nor to me show it to them :p.

We have another example: A field called rate (for that rating stars) and an "avatar" field which should both be hidden on inser/update form so i'd inject a value inside this avatar field based on a image our user select.

EDIT: At this moment, as i'm coming from Blaze idk where i should implement this code you suggested. Shoud it be like another field type on simple-react-form package?

[vedovato]

Oh, sorry. Blaze's a template engine for meteor, if don't know it :p

[fermuch]

Ah, now I get it. I couldn't see it your way because I always declare my fields inside the form.

For the first use case, having the type: HiddenField in the schema would solve that, and for the second... Well, we need to declare a fieldtype for those cases :P
Anyways, the type="" syntax is (mostly-)deprecated, so using type="hidden" is a no; we should make some other way to declare that type of fields. I'll see if I can get something usable tomorrow or monday.

[copleykj]

Any Progress on this? Working on a project that having a HiddenField type for, would be very handy. 😄

[nicolaslopezj]

Hi @copleykj, I don't think a HiddenField in necessary in any case (just my opinion). Can you tell us your case to discuss?

[copleykj]

I currently have 2 simple-schemas. One for properties (house, building, etc..), and another for units (apartment, office, etc..). In the unit schema I have a foreign key for linking the units to the properties. In the app when navigating to a certain property I fetch the doc for the property and display the information. On this page I also have the ability to add units to the property. I use the unit schema along with the Form component to handle the form.

        <Form type="insert" collection={UnitsCollection}>
            <Row>
                <Col xs={12}>
                    <h1>New Unit</h1>
                </Col>
            </Row>
            <Row>
                <Col sm={6} lg={4}>
                    <Field fieldName="unitName" />
                </Col>
            </Row>
            <Row>
                <Col sm={10} lg={7}>
                    <Field fieldName="description" />
                </Col>
            </Row>
            <Row>
                <Col xs={4} sm={3} lg={2}>
                    <Field fieldName="bedrooms" />
                </Col>
                <Col xs={4} sm={3} lg={2}>
                    <Field fieldName="bathrooms" />
                </Col>
                <Col xs={4} lg={3}>
                    <Field fieldName="laundry" />
                </Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <Field fieldName="utilities" />
                </Col>
            </Row>
            <Row>
                <Col xs={12}>
                    <Button type="submit" bsStyle="primary">Create</Button>
                </Col>
            </Row>
        </Form>

For the foreign key I would like to be able to add it as a form field and specify the value as a prop so when the form is submitted, the required key is inserted and everything just works nicely. So something like the following could be done.

in the schema

srf: {
    type: HiddenField
}

and in the jsx for the form

<Field fieldName="propertyId" value={props.currentProperty._id} />

Currently I've created my own HiddenField component as follows

class HiddenField extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: props.value };
    }
    componentDidMount() {
        this.props.onChange(this.state.value);
    }
    render() {
        return null;
    }
}

[MichaelLeeHobbs]

+1 Just want to add thanks for this library and add that yes HiddenField is a very desirable feature.