How to use the @commercetools-frontend/ui-kit.LocalizedTextInput.isTouched function in @commercetools-frontend/ui-kit

To help you get started, we’ve selected a few @commercetools-frontend/ui-kit examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github commercetools / ui-kit / examples / form-inputs.example.story.js View on Github external
(() => {
                const allLocales =
                  LocalizedTextInput.isTouched(
                    this.props.formik.touched.slug
                  ) && this.props.formik.errors.slug
                    ? // We map on the per-field errors which are present on
                      // the "translations" field
                      this.props.formik.errors.slug.translations
                    : {};
                return Object.entries(allLocales).reduce(
                  (acc, [key, error]) => {
                    const value = error.hasForbiddenChars ? (
                      This slug is not valid.
                    ) : (
                      undefined
                    );

                    return {
                      [key]: value,
github commercetools / ui-kit / examples / form-inputs.example.story.js View on Github external
*/}
          Product name*
          
          {LocalizedTextInput.isTouched(this.props.formik.touched.name) &&
            this.props.formik.errors.name &&
            this.props.formik.errors.name.missing && (
              // The LocalizedTextInput provides a generic default message
              // when it is a required field and values are missing
              // It is also possible to use a custom, more detailed error
              // message as shown on the example below (the slug)
              
            )}
        
        <div>
          Slug*
          
            The slug can contain alphanumeric characters (0-9 or A-Z),
            underscores or hyphens with no spaces, and can be anywhere between 2
            to 256 characters long.
          </div>
github commercetools / ui-kit / examples / form-inputs.example.story.js View on Github external
This slug is not valid.
                    ) : (
                      undefined
                    );

                    return {
                      [key]: value,
                      ...acc,
                    };
                  },
                  {}
                );
              })()
            }
          /&gt;
          {LocalizedTextInput.isTouched(this.props.formik.touched.slug) &amp;&amp;
            this.props.formik.errors.slug &amp;&amp;
            this.props.formik.errors.slug.missing &amp;&amp; (
              // This shows how a detailed custom error message can be used
              // for LocalizedTextInput
              
                Missing slug. At least one field must be filled.
              
            )}
        
        <div>
          Product Description*
          </div>