We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SyncFusion with Formik

Thread ID:

Created:

Updated:

Platform:

Replies:

142924 Feb 19,2019 05:27 PM UTC Jun 9,2020 02:05 PM UTC Angular - EJ 2 2
loading
Tags: DropDownList
Mike Koporc
Asked On February 19, 2019 05:27 PM UTC

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
Replied On June 8, 2020 08:17 PM UTC

Did you manage to work this out?


Berly Christopher [Syncfusion]
Replied On June 9, 2020 02:05 PM UTC

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>   
    );   
  }   
}   
   
 
 
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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon