fix: 更新表单节点引用,重构地址模式验证逻辑,调整 schema 定义
All checks were successful
/ surge (push) Successful in 37s

This commit is contained in:
严浩
2024-11-15 18:18:01 +08:00
parent 9c045d1398
commit 5a63d25775

View File

@ -15,46 +15,38 @@ const castNumber = (node: FormKitNode) => {
onMounted(() => {
const agreeNode = getNode('agreeNodeId')
Object.assign(window, { agreeNode })
console.debug('[onMounted]', `agreeNode :>> `, agreeNode);
const nameNode = agreeNode?.context?.node.at('attributes.name')
const nameNode = getNode('nameNodeId')
Object.assign(window, { nameNode })
console.debug('[onMounted]', `nameNode :>> `, nameNode);
agreeNode!.on('commit', ({ payload }) => {
console.debug('[agreeNode] [on commit]', `payload :>> `, payload);
let newValue = (nameNode?.value as string)?.replace(' 👍', '')?.replace(' 👎', '')
nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`)
const schemaGroupInput = nameNode!.root.at('schemaGroup.input')
console.debug('[onMounted]', `schemaGroupInput :>> `, schemaGroupInput);
nameNode!.on('commit', ({ payload }) => {
console.debug('[nameNode] [on commit]', `payload :>> `, payload);
schemaGroupInput!.input(`姓名:${payload}`)
})
})
const addressSchema: FormKitSchemaDefinition = [
const SCHEMA: FormKitSchemaDefinition = [
{
$el: 'h1',
children: 'JSON Schema Form',
attrs: {
class: 'font-bold text-2xl mb-4',
'data-foo': 'bar',
},
},
{
$formkit: 'group',
name: 'address',
name: 'schemaGroup',
children: [
{
$formkit: 'text',
name: 'street',
label: '街道地址',
label: 'JSON Schemaed Input',
name: 'input',
validation: 'required',
validationLabel: '街道地址'
},
{
$formkit: 'text',
name: 'city',
label: '城市',
validation: 'required',
validationLabel: '城市'
},
{
$formkit: 'text',
name: 'zipCode',
label: '邮政编码',
validation: 'required|number|length:6',
validationLabel: '邮政编码',
errors: ['显式错误'] // 显式设置的错误是非阻塞的,这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。
// :errors="errors"
validationLabel: 'input字段',
errors: ['显式设置的错误是非阻塞的,这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。']
}
]
}
@ -94,15 +86,10 @@ const addressSchema: FormKitSchemaDefinition = [
<FormKit
type="text"
name="name"
id="nameNodeId"
label="姓名"
help="别人都叫你什么"
/>
<div
v-if="!((value?.attributes as any)?.name)?.includes('测试')"
class="text-red-500 mb-4 p-2 border border-red-500 rounded"
>
输入的姓名必须包含 '测试' 字符串。
</div>
<FormKit
type="checkbox"
@ -151,13 +138,12 @@ const addressSchema: FormKitSchemaDefinition = [
</div>
<div class="character-attributes">
<FormKitSchema :schema="addressSchema" />
<FormKitSchema :schema="SCHEMA" />
</div>
<FormKit
type="checkbox"
name="agree"
id="agreeNodeId"
label="我同意FormKit是最好的表单开发框架"
class="mb-4"
/>