Repository navigation
Form.FieldArray validation is not working #175
Description
I have following code. I exctracted only needed code for it. My model has name and array of simple fields. I just want to check if this array is not empty and raise validation error.
This is the example. Validation error for fields property is not working. Code is in Typescript. I expecting when I remove last field then I will have error message but there isn't any...
I also checked when such value with empty array I check using validate method on yup schema then it raises an error as expected. Because of that I think something is broken in React Formal.
What is really strange when min(2, 'Must have at least two fields') validation is applied to the fields then it works. Really strange behavior.
import React, { Fragment } from 'react';
import * as yup from 'yup';
import { ObjectSchema } from 'yup';
import Form from 'react-formal';
interface IField {
id: number;
}
interface ITest {
name: string;
fields: IField[];
}
let cid: number = 0;
const initialData: ITest = {
name: 'John',
fields: [],
};
const fieldSchema = yup.object<IField>( { id: yup.number().required( 'Value is required' ) } ).required();
const schema: ObjectSchema<ITest> = yup.object<ITest>( {
name: yup.string().required().default( '' ),
fields: yup.array().of( fieldSchema )
.required( 'Must exist' )
.min( 1, 'Must have at least one field' ),
} ).required();
const FormalTest: React.FC = () => {
return (
<div>
<Form<ObjectSchema<ITest>, ITest>
schema={ schema }
defaultValue={ initialData }
>
<Form.Field name="name" placeholder="Name" />
<Form.Message for="name" />
<Form.FieldArray<IField> name="fields">
{ ( values, arrayHelpers, meta ) => (
<Fragment>
{ values.map( ( field, index ) => (
<div key={ field.id }>
<Form.Field name={ `fields[${index}].id` } />
<button onClick={ () => arrayHelpers.remove( field ) }>Remove</button>
</div>
) ) }
<button onClick={ () => arrayHelpers.push( { id: cid+=1 } ) }>Add</button>
</Fragment>
) }
</Form.FieldArray>
<Form.Message for="fields" />
</Form>
</div>
);
};
Activity