foxhound87 / mobx-react-form

Reactive MobX Form State Management
https://foxhound87.github.io/mobx-react-form
MIT License
1.09k stars 129 forks source link

Error while initializing mobx react form #564

Closed ratnabh closed 3 years ago

ratnabh commented 3 years ago

I am trying to add mobx react form but finding some weird error in it. Here is my code

Formvalidation.tsx

import MobxReactForm from "mobx-react-form";
import dvr from "mobx-react-form/lib/validators/DVR";
import validatorjs from "validatorjs";
import Fields from "../../modules/Admin/LoginSignup/Signup/Fields";

const plugins = {
  dvr: dvr(validatorjs),
};
const fields = Fields;

const hooks = {
  onSuccess(form) {
    alert("Form is valid! Send the request here.");
    // get field values
    console.log("Form Values!", form.values());
  },
  onError(form) {
    alert("Form has errors!");
    // get all form errors
    console.log("All form errors", form.errors());
  },
};

export default new MobxReactForm({ fields }, { plugins, hooks });

and then when i try to use this in my component like

import { IClasses } from "../../../../interfaces";
import  {getFormValidation}  from "../../../../shared";
import Fields from "./Fields";
import { observable } from "mobx";
import { MobxReactForm } from "mobx-react-form";
import { observer } from "mobx-react";

interface Props {
  classes: IClasses;
}
@observer
class Signup extends Component<Props> {
  constructor(props: Props) {
    super(props);
    console.log(Fields);
  }
  @observable public myForm: MobxReactForm = getFormValidation(); 

  //here this above line is givng error

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.paper}>
        <h2 className={classes.SignUpText}>Sign Up</h2>
        <form>
          <TextField
            variant="outlined"
            margin="normal"
            fullWidth
            name="firstName"
            label="First Name"
            type="text"
            size="small"
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="lastName"
            label="Last Name"
            type="text"
            size="small"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <div>
            <Link to="/sign-in" className={classes.routerLink}>
              Already have an account ? Sign in
            </Link>
          </div>
        </form>
      </div>
    );
  }
}

export default Signup;

I get this error Screenshot 2021-01-02 at 1 52 22 PM

Tried using the new and old version of mobx react form but still same error :(

foxhound87 commented 3 years ago

This error is not related to the package