formik v1.5.2, yup v0.27.0, react v16.8.6
Я не могу заставить валидацию Yup работать в Formik с массивом объектов. Код находится в кодовом поле https://codesandbox.io/s/kw1r49v25o?fontsize=14 < / а>
Начальные значения:
const INITIAL_VALUES = {
users: [
{
value: "admin"
}
]
};
Схема Yup:
const usersSchema = Yup.object().shape({
users: Yup.array().of(
Yup.object().shape({
value: Yup.string()
.max(3)
.required()
})
)
});
Я намеренно ограничил размер строки до 3 символов, чтобы вызвать ошибку проверки.
Компонент:
function App() {
const [data, setData] = useState(INITIAL_VALUES);
useEffect(() => {
setData({
users: [
{
value: "trex"
},
{
value: "velociraptor"
}
]
});
}, []);
return (
<div className="App">
<Formik
initialValues={data}
enableReinitialize={true}
validateOnChange={true}
validateSchema={usersSchema}
render={({ values, errors, touched, isValid, isValidating }) => {
console.log("render - isValid", isValid);
console.log("render - isValidating", isValidating);
console.log("render - errors", errors);
return (
<Form>
<Field name="users[0].value" />
<div>{`isValid = ${isValid}`}</div>
{Object.keys(errors) > 0 ? (
<div>{`Error: ${JSON.stringify(errors)}`}</div>
) : null}
</Form>
);
}}
/>
</div>
);
}
И ошибок на странице нет. Я ожидаю увидеть строковые ошибки и isValid = false, когда добавляю новые символы во входные данные.