[Question] set submit-button-label in AutoForm

[cyclops24]

Hi @radekmie,
I want to customize submit button in an Autoform. Now it's show "Submit Query" for button label.
I also see this and this but can't set submit-button label.
It's my try:

import {SubmitField} from 'uniforms-bootstrap3';
const customSubmitField = () =>
        <SubmitField>Login</SubmitField>;
<AutoForm schema={LoginSchema} placeholder={true}
                          getSubmitField={customSubmitField}
                          onSubmit={doc => console.log(doc)}>

Can you help me to do this?

[radekmie]

If you still want to use fully automatic AutoForm, i.e. <AutoForm schema={...} onSubmit={...} />, then pass an additional submitField prop with your custom SubmitField.

Example:

import SubmitField from 'uniforms-unstyled/SubmitField'; // <- !

const MySubmitField = props =>
    <SubmitField value="Submit Label Here" /> // It's <input type="submit" />
;

// Later...

<AutoForm schema={...} onSubmit={...} submitField={MySubmitField} />

If you are using not-so-fully-automatic AutoForm:

<AutoForm schema={...} onSubmit={...}>
    <AutoField ... />
    {/* ... */}

    {/* Like this */}
    <MySubmitField />

    {/* Or directly */}
    <SubmitField value="Submit Label Here" />
</AutoForm>

[radekmie]

I'll close it. If you have more questions, just let me know.

[cyclops24]

@radekmie Thanks man. I test it and works well.

[bennycode]

I tried it like this:

import JSONSchemaBridge from 'uniforms-bridge-json-schema';
import {AutoFields, AutoForm, ErrorsField, LongTextField, SubmitField} from 'uniforms-material';
// ...

const strategyAddSchema = {
  title: 'Strategy',
  type: 'object',
  properties: {
    // ...
  },
  required: ['config', 'label', 'name', 'user', 'version'],
};

const strategyAddBridge = new JSONSchemaBridge(strategyAddSchema, () => null);

const strategyAddForm = (
  <AutoForm
    schema={strategyAddBridge}
    onSubmit={async (model: StrategyEntityProps) => {
      // ...
    }}>
    <AutoFields />
    <ErrorsField />
    <SubmitField value={'Test'} />
  </AutoForm>

But the submit button still shows text "Submit" instead of "Test".

@radekmie, have I missed something? 🤔

[radekmie]

Hi @bennycode. It depends on your theme - in uniforms-material it looks like this, hence you should use label or children props instead of value.

[bennycode]

<SubmitField label="Test" /> did the trick! Thank you!!