Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

clear form #51

Open
muhaimincs opened this issue Dec 3, 2017 · 4 comments
Open

clear form #51

muhaimincs opened this issue Dec 3, 2017 · 4 comments

Comments

@muhaimincs
Copy link

How do I clear the form once form values submitted? FYI, I use stateless component as container to the form. Please advice

@busypeoples
Copy link
Owner

The onSubmit function accepts a callback. You could use the updateState(form) in the callback to reset the form. You could als reset the form via props.
I can build a minimum example tomorrow if this would help.

@muhaimincs
Copy link
Author

when I trigger updateState it turn on the error but does not clear the form

here is my enhance form

const validationRules = {
  substore_uuid: [[isNotEmpty, 'Sila buat pilihan stor']],
  quantity: [
    [isNotEmpty, 'Sila masukkan kuantiti'],
    [isInteger, 'Sila nombor bulat sahaja'],
  ],
};

const DistributeForm = ({onSubmit}) => {
  const initialState = {
    substore_uuid: '',
    quantity: '',
  };
  if (disabled) return null;
  return (
      <Form
        initialState={initialState}
        rules={validationRules}
        validateSingle={false}
        validateOnChange
        onSubmit={onSubmit}
      />
  );
};

and here is the actual form bind with revalidation

const StockForm = ({
  onSubmit: submitCb,
  max,
  disabled,
  revalidation: {form, valid, errors = {}, onSubmit, updateValueAndValidate},
}) => (
  <form
    onSubmit={e => {
      e.preventDefault();
      onSubmit(() => (valid ? submitCb(form) : null));
    }}>
    <div className="card-body">
      <div
        className={`form-group required ${errorClass(errors.substore_uuid)}`}>
        <span>Substor</span>
        <CommonSubstore
          name="substore_uuid"
          onChange={updateValueAndValidate}
        />
        <ErrorLabel err={errors.substore_uuid} />
      </div>
      <div className={`form-group required ${errorClass(errors.quantity)}`}>
        <span>Kuantiti Agihan</span>
        <input
          name="quantity"
          type="number"
          className="form-control"
          required
          max={max}
          onChange={updateValueAndValidate}
        />
      </div>
      {errors.quantity.map(err => <ErrorLabel key={err} err={err} />)}
    </div>
    <div className="card-footer">
      <button disabled={!valid || disabled} className="btn btn-success">
        Agih
      </button>
    </div>
  </form>
);

Right now I didn't clear the form yet but if I do, I'd do it in my enhance form

@busypeoples
Copy link
Owner

I'll give you feedback later on today.

@busypeoples
Copy link
Owner

@muhaimincs I'm trying to rebuild your example, to get it running, I'll need more information.
Could you build a demo on https://codesandbox.io/ i.e.? We should have this solved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants