SyncFusion with Formik

[Mike Koporc]

Good morning,

I am switching over from Angular and trying to figure out the best way to switch an enterprise application (100+ forms) to React.  We were considering using syncfusion and had also heard good things about Formik.  I was wondering if anyone had experience with the two together.  The most basic components seem to work, but components such as the DropDownListComponent or DateTimePickerComponent do not.  What we are hoping to accomplish is easy, non-repetitive data binding and validation.  

Correctly binds data to form:

<Field component="input" className="e-input" name="name" type="text" placeholder="Rule Name" />

Doesn't bind data to form:

<Field component={DropDownListComponent} name="ruleTypeId" fields={{ text: 'name', value: 'ruleTypeId' }} dataSource={this.ruleTypes} />

Thanks for any ideas or suggestions!

-Mike

[Darrel Schreyer]

Did you manage to work this out?

[Berly Christopher]

Hi Mike/ Darrel,   

 

Greetings from Syncfusion Support.   

 

We have prepared a sample with dropdownlist using Formik plus Yup to handle forms and validation. In the form validation we have used “formik”, can you please check the below code and use it your application?   

 

[index.js]   

const formikEnhancer = withFormik({   

  validationSchema: Yup.object().shape({   

    valid: Yup.string().required("Value is required!")   

  }),   

  mapPropsToValues: props => ({   

    valid: []   

  }),   

  handleSubmit: (values, { setSubmitting }) => {   

    setSubmitting(false);   

  },   

  displayName: "MyForm"   

});   

   

const MyForm = props => {   

  const {   

    values,   

    touched,   

    errors,   

    handleSubmit,   

    setFieldValue,   

    setFieldTouched,   

    isSubmitting   

  } = props;   

   

  return (   

<form onSubmit={handleSubmit}>   

    <MySelect value={values.valid}   

              onChange={setFieldValue}   

              onBlur={setFieldTouched}   

              error={errors.valid}   

              touched={touched.valid} />   

    <button type="submit" disabled={isSubmitting}>   

        Submit   

    </button>   

</form>   

  );   

};   

   

const options = [   

  { Id: "Game1", Game: "American Football" },   

  { Id: "Game2", Game: "Badminton" },   

  { Id: "Game3", Game: "Basketball" },   

  { Id: "Game4", Game: "Cricket" },   

  { Id: "Game5", Game: "Football" },   

  { Id: "Game6", Game: "Golf" },   

  { Id: "Game7", Game: "Hockey" },   

  { Id: "Game8", Game: "Rugby" },   

  { Id: "Game9", Game: "Snooker" },   

  { Id: "Game10", Game: "Tennis" }   

];   

   

const field = { text: "Game", value: "Game" };   

class MySelect extends React.Component {   

  handleChange = args => {   

    this.props.onChange("valid", args.value);   

  };   

   

  handleBlur = () => {   

    this.props.onBlur("valid", true);   

  };   

   

  render() {   

    return (   

<div style={{ margin: "1rem 0" }}>   

    <div id="multi">   

        <h4> MultiSelect </h4>   

        <DropDownListComponent id="select"   

                               dataSource={options}   

                               mode="Default"   

                               fields={field}   

                               value={this.props.value}   

                               change={this.handleChange}   

                               blur={this.handleBlur}   

                               placeholder="Select a game"   

                               popupHeight="220px" />   

    </div>   

    {!!this.props.error && this.props.touched && (   

    <div style={{ color: "red", marginTop: ".5rem" }}>   

        {this.props.error}   

    </div>   

    )}   

</div>   

    );   

  }   

}   

   

 

Sample using Formik:  https://codesandbox.io/s/formik-12-x-react-select-example-lm7uz   

 

Also, we have prepared a sample using our Syncfusion Form Validator to validate the dropdownlist component.   

 

Sample using Syncfusion Form Validator:  https://stackblitz.com/edit/react-zeq8jx?file=index.js   

 

Regards,   

Berly B.C