clear form

[muhaimincs]

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

[busypeoples]

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]

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]

I'll give you feedback later on today.

[busypeoples]

@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.