英文:
Yup validation schema for dynamically added grid fields
问题
我有一个以下的JSON模型。这可以被可视化为网格行（动态添加/移除，即可以向gridItems添加新行，也可以删除）
{
"sections": [{
"id": "my-section-1",
"gridItems": [{
"fields": [{
"id": "field1",
"value": "Row 1 Col 1"
}, {
"id": "field2",
"value": "Row 1 Col 2"
}]
}, {
"fields": [{
"id": "field1",
"value": "Row 2 Col 1"
}, {
"id": "field2",
"value": "Row 2 Col 2"
}]
}]
}]
}
我通过React Hook Form将此JSON映射到UI上的字段。
此外，为了确保字段的唯一性（以及设置默认值），我在运行时将上述结构附加了索引，即这些字段的ID实际上被解析为
field1-0, field2-0, field1-1, field2-1
现在，我想要定义/映射这些字段到Yup验证模式，并且正在考虑最佳方法。
所以，所有的'field1'跨行都应该具有相同的验证...类似于'field2'
- 我可以使用模式定义Yup验证，例如对于field1-X
或者 - 我是否需要在这里使用Yup.array...再次的问题是我不直接从上述结构中渲染这些字段，而是将它们复制到一个本地状态变量对象中（解析为索引），然后使用该对象渲染UI字段。
英文:
I have a JSON model as below. This can be visualized as grid rows (added/removed dynamically i.e. new rows can be added to the gridItems and also removed)
{
"sections": [{
"id": "my-section-1",
"gridItems": [{
"fields": [{
"id": "field1",
"value": "Row 1 Col 1"
}, {
"id": "field2",
"value": "Row 1 Col 2"
}]
}, {
"fields": [{
"id": "field1",
"value": "Row 2 Col 1"
}, {
"id": "field2",
"value": "Row 2 Col 2"
}]
}]
}]
}
I map this JSON to fields on the UI via React Hook Form.
Also for uniqueness for registering field (and also for setting defaultVales), I append -index to the above structure at runtime
i.e. these fields id's are actually parsed to
field1-0, field2-0, field1-1, field2-1
Now, I want to define/map these fields to Yup validation schema and am thinking of the best way.
So, all the 'field1' across rows would have the same validation...similarly for 'field2'
- Can I define a Yup validation using pattern i.e. say for field1-X
OR - Do I need to somehow use Yup.array here...again the issue is I do not directly render these fields from the above structure, but instead copy these to a local state variable object (parsed with -index) and using that render UI fields.
答案1
得分: 1
我建议在示例中传递带有字段的索引，然后你的模式将类似于这样：
yup.object().shape({
grid: yup.array().of(yup.object().shape({
index: yup.number(),
fields: yup.when("index", {
is: 0, // 这里是索引值
then: yup.object().shape({
id: yup.string(),
value: yup.string() // 这将被更改
})
})
}))
})
你可以根据需要更改"when"运算符以使用更复杂的函数，例如：
yup.object().shape({
grid: yup.array().of(yup.object().shape({
index: yup.number(),
fields: yup.when("index", (index, schema) => {
if (index === 1) {
return yup.object().shape({
id: yup.string(),
value: yup.string() // 这将被更改
});
} else {
// 返回其他模式
return schema;
}
})
}))
})
不要担心格式。
英文:
i would recommend passing index with fields for examples
grid:[
{index:0,fields:[...]
},...]
and then you schema will be something like this
yup.object().shape(
grid:yup.array().of(yup.object().shape(
{index:yup.number(),fields:yup.when("index",
{ is: 0,//index goes here
then: yup.object().shape({
id:yup.string(),
value:yup.string() //this will be changed
})
})}))
)
you can change when operator for more complex function like this
yup.object().shape(
grid:yup.array().of(yup.object().shape(
{index:yup.number(),fields:yup.when("index",
(index,schema)=>{
if(index===1){
return yup.object().shape({
id:yup.string(),
value:yup.string() //this will be changed})}else{
return //other schema
}
)
})}))
)
don't mind the formatting
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论