表单Schema
Schema
在项目开发初期我们需要定义一个合适的
-
jsonSchema 中描述了表单的数据类型、数据源、数据项等配置; -
uiSchema 描述了表单字段的渲染方法、渲染参数等; -
formData 描述了表单初始填充的各个字段的初始值; -
bizData 中是对表单字段的业务属性,注意的是,bizData 不会影响Form 的渲染
react-json-schema
JSONSchema
{
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": ["firstName", "lastName"],
"properties": {
"firstName": {
"type": "string",
"title": "First name"
},
"lastName": {
"type": "string",
"title": "Last name"
},
"age": {
"type": "integer",
"title": "Age"
},
"bio": {
"type": "string",
"title": "Bio"
},
"password": {
"type": "string",
"title": "Password",
"minLength": 3
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10
}
}
}
UISchema
{
"firstName": {
"ui:autofocus": true,
"ui:emptyValue": ""
},
"age": {
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"ui:widget": "textarea"
},
"password": {
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"date": {
"ui:widget": "alt-datetime"
},
"telephone": {
"ui:options": {
"inputType": "tel"
}
}
}
合并的Schema
{
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": ["firstName", "lastName"],
"properties": {
"firstName": {
"type": "string",
"title": "First name",
"ui:autofocus": true,
"ui:emptyValue": ""
},
"lastName": {
"type": "string",
"title": "Last name"
},
"age": {
"type": "integer",
"title": "Age",
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"type": "string",
"title": "Bio",
"ui:widget": "textarea"
},
"password": {
"type": "string",
"title": "Password",
"minLength": 3,
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10,
"ui:options": {
"inputType": "tel"
}
}
}
}