Create a form with a submit button inside

[ekaradon]

Hello,

Great library, I am using without any difficulty inside a really custom context without much difficulties. Yet, I do have a little issue with some custom layout. I have defined a custom template which is this one:

form
  h1
  input#1
  input#2
  input#3
  submit
  a

So I am now using the form through my page component, but I cannot set the function for "onSubmit" stage because it is not imported in locals. Is there a way for me to set the onSubmit knowing that I cannot change the layout of the template?

Thanks,

[gcanti]

Not sure I'm follow, could you elaborate a little bit on your use case?

Maybe this can be helpful? https://github.com/gcanti/tcomb-form/issues/167

[ekaradon]

I have been able to solve my case using the solution you have here: https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#submitting-the-form

However, this means that I cannot use a custom form layout AND use the submit button inside this custom layout in order to trigger an action on my parent component.

When doing something like:

const custom_layout (locals) => {
<form onSubmit={locals.onSubmit} >
  ...
 <input type='submit'>
 ...
</form>
};

const options = {
  template: custom_layout
};

<t.form.Form onSubmit={this.submit} />

Is it more clearly?

[gcanti]

What about using the config option? The config option can be used to send to templates custom values, like bootstrap extras

https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#bootstrap-extras

Example

const options = {
  config: {
    onSubmit: this.onSubmit
  },
  template: custom_layout
};

[ekaradon]

It seems a bit unnatural to me to be able to set "onChange" but not "onSubmit" in fact, don't you think?

2015-09-10 16:30 GMT+02:00 Giulio Canti notifications@github.com:

What about using the config option? The config options can be used to send to templates custom values, like bootstrap extras

https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#bootstrap-extras

Example

const options = { config: { onSubmit: this.onSubmit }, template: custom_layout };

— Reply to this email directly or view it on GitHub https://github.com/gcanti/tcomb-form/issues/192#issuecomment-139262383.

[gcanti]

Well it really depends on how you consider the Form component.

The output of the Form component is a fieldset tag containing your fields. You can submit the form wrapping the output with a form tag

In tcomb-form the Form component can be a controlled component so it's natural to set a onChange prop. However if I add a onSubmit prop to the Form API then I must handle the trigger (a submit button) and probably also the method and action attributes of the form tag and I don't want to do that.

You are free to implement your custom behaviour simply wrapping the Form component:

render() {
    return (
      <form onSubmit={this.onSubmit}>
        <Form
          ref="form"
          type={MyType}
        />
        <button type="submit">Save</button>
      </form>
    );
  }

[ekaradon]

Ok, it is getting clearer now for me about the object of the library. Thank you. :)