Formik: Formik Validation in a Field Array

Created on 14 Sep 2019 · 2Comments · Source: formium/formik

Hello I have a formik form where I am showing an array of text using Field Array. I want to have validation when for any text field, the number of characters are more than 28.

How do I do this ?

Below is my code:-

import Drawer from "components/atoms/Drawer";
/* import Input from "components/atoms/Input";
import InputGroup from "components/atoms/InputGroup";
import Label from "components/atoms/Label"; */
import Scrim from "components/atoms/Scrim";
import DrawerBody from "components/molecules/DrawerBody";
import { Field, FieldArray, Form, FormikErrors, FormikProps, withFormik } from "formik";
import { ITrackedPage } from "hocs/withAppDynamics";
import * as React from "react";
import { Box, Flex, Text } from "rebass";
import * as AmenitiesActions from "store/amenities/actions";
import { IAmenity, IAmenityRanking } from "store/amenities/models";
import DrawerHeader from "./DrawerHeader";
// import ErrorMessage from 'components/atoms/ErrorMessage';

interface IAmenitiesDrawerProps {
drawerOpen: boolean;
onDrawerClose: () => void;
tenantAssessmentId: string;
actions: typeof AmenitiesActions;
maxRank?: number;
}

interface IAmenitiesDrawerValues {
amenitieslist: IAmenity[];
}

const InnerForm: React.FC<
IAmenitiesDrawerProps & ITrackedPage & FormikProps

= ({
errors,
drawerOpen,
onDrawerClose,
handleChange,
values,
setValues,
isValid,
tenantAssessmentId,
sendAnalyticsData,
actions
}) => {

const handleDrawerClose = () => {
onDrawerClose();
};

return (
<>

Add custom amenities

name="amenitieslist"
render={arrayHelpers => (

{// values.amenitieslist && values.amenitieslist.length > 0 ? (
values.amenitieslist.map((amenity, index) => (

amenitieslist.${index}.name} />
type="button"
onClick={() => arrayHelpers.remove(index)} // remove a amenity from the list
>
-

{errors.amenitieslist}

))}

)}
/>

);
};

export const AmenitiesDrawer = withFormik({
enableReinitialize: true,
handleSubmit: (values, {props}) => {
const seed: number = props.maxRank? props.maxRank : 0;
const amenityRankings: IAmenityRanking[] = values.amenitieslist.map((a, index)=>({
amenityId: 1,
rank: index + 1 + seed,
amenityName: a.name,
customAmenity: true
}));
console.log(amenityRankings);
console.log(props.actions.customSaveAmenities);
console.log(props.tenantAssessmentId);
props.actions.customSaveAmenities(props.tenantAssessmentId, amenityRankings);
},
mapPropsToValues: ({tenantAssessmentId}) => ({
amenitieslist:[{id: 0, name: '', imageUrl: '', description: '', tenantAssessmentId}]
}),
validate: values => {
const errors: FormikErrors<{ validAmenity: string }> = {};
console.log('In the Validate method');
const { amenitieslist } = values;

const amenityValid = amenitieslist[0].name.length < 28;
if (!amenityValid) {
    console.log('Amenity is not valid');
  errors.validAmenity = "Amenity needs to be atmost 28 characters";
  console.log(errors);
}

return errors;

}
})(InnerForm);

stale

Source