Error: The selected field is not defined (email)

Question

我正在尝试学习 mobx-react-form 和验证部分。我想要一个简单的电子邮件验证，我也想用 mobx-react-form 来做。 下面是我的代码

const formFields = {
  email: {
    type: 'text',
    placeholder: 'Your Email Address',
    rules: 'required|email|string|between:5,50',
    value: ''
  }
};

@observer
class form extends React.Component {
  getValidation(): MobxReactForm {
    const hooks: any = {};

    const plugins: any = {
      dvr: dvr(validatorjs)
    };

    const formOptions: any = {
      validateOnChange: true
    };

    return new MobxReactForm({ formFields }, { plugins, hooks, formOptions });
  }
  @observable
  private form: MobxReactForm = this.getValidation();
  render() {
    return (
      <div>
        <form>
          <div>
            <FormControl margin="normal" fullWidth>
              <TextField {...this.form.$('email').bind()} />
            </FormControl>
            <Button variant="contained" color="primary" type="submit">
              Primary
            </Button>
          </div>
        </form>
      </div>
    );
  }
}
export default form;

It's showing this error

Answer 1

我认为您的字段键有误：

  // It should be `fields` instead of `formFields`
  return new MobxReactForm({ fields }, { plugins, hooks, formOptions });

Codesandbox

Error: The selected field is not defined (email)

Error: The selected field is not defined (email)

reactjs

mobx

mobx-react-form