CODEWITHSUNDEEP
redux-formsemantic-ui-react
Son Dang
Son Dang

Reputation: 153

Redux-form semantic UI with AsyncValidation

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.

Upvotes: 1

Views: 192

Answers (1)

Son Dang
Son Dang

Reputation: 153

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
/>

Upvotes: 1

Related Questions