Redux-form semantic UI with AsyncValidation

Question

Need help

I followed this example http://redux-form.com/6.6.3/examples/submitValidation/ and http://redux-form.com/6.6.3/examples/asyncValidation/

I use Semanitic-UI & made a loading state Redux-form component as code below:

Loading state of the semantic Input is: You could find it here

...
const ReduxFormInput = ({ input, label, placeholder, checkboxLabel, type, meta: { asyncValidate, touched, error } }) => {
  const errorMessage = (<div style={{ color: '#E20000', paddingTop: '.3rem', fontSize: '12px' }} >
    <Icon name="warning" />
    {error}
  </div>);

  return (
    <div>
      <Label>{label}</Label>
      <Input  // styled semantic-ui-react Input 
        {...input}
        type={type}
        placeholder={placeholder}
        error={error ? true : null}
        loading={asyncValidate ? true : undefined} // load loading state when submitting 
        icon={asyncValidate ? 'user' : undefined} // load icon state when submitting
      />
      {touched && error && errorMessage}
    </div>
  );
};

export default ReduxFormInput;

The form work perfectly instead of Async Loading state within semantic-ui component not works.

Thank you so much.

Son Dang · Accepted Answer · 2017-05-02 12:26:29Z

1

Ok, I found my answer

const ReduxFormInput = ({ input, label, placeholder, checkboxLabel, type, meta: { submitting, asyncValidate, touched, error } }) => ...

<Input
  {...input}
  type={type}
  placeholder={placeholder}
  error={error ? true : null}
  loading={submitting|| asyncValidate ? true : undefined} // ---> semantic-ui-react loading prop, state when submitting 
  icon={submitting|| asyncValidate ? 'user' : undefined} // ---> semantic-ui-react icon prop, load icon when submitting
/>

answered May 2, 2017 at 12:26

Son Dang

1532 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux-form semantic UI with AsyncValidation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related