如何在Vue Formulate中获取表单组内嵌套字段的验证错误信息

原因 #

Vue Formulate 中表单组的 @validation 事件返回的 errors 数组仅存储表单组本身的校验错误，不包含组内嵌套字段的错误。返回对象的 hasErrors 为 true 只是标记组内存在子字段错误，不会把子字段的错误聚合到当前的 errors 数组里。

解决方法 #

方法1：通过表单实例直接获取全量错误（最简便） #

给根 <FormulateForm> 组件绑定 ref，通过表单实例的 errors 属性直接获取所有字段的错误，不管层级是否嵌套，错误对象的键为对应字段的 name 属性：

<template>
  <FormulateForm ref="formRef">
    <FormulateInput
      type="group"
      name="personalDetails"
      @validation="myValidationEvent"
    >
      <FormulateInput name="username" label="用户名" validation="required" />
      <FormulateInput name="phone" label="手机号" validation="required" />
    </FormulateInput>
  </FormulateForm>
</template>

<script>
export default {
  methods: {
    myValidationEvent() {
      // 直接获取全表单所有字段的错误
      console.log(this.$refs.formRef.errors)
      // 单独取personalDetails组内的username错误
      console.log(this.$refs.formRef.errors.username)
    }
  }
}
</script>

如果是Vue3环境，ref的使用方式为 const formRef = ref()，访问时用 formRef.value.errors 即可。

方法2：遍历表单组的子字段实例聚合错误 #

如果仅需要获取当前触发校验的表单组内的错误，可以给表单组绑定ref，访问其 fields 属性获取所有子字段实例，遍历聚合错误：

<template>
  <FormulateInput
    type="group"
    name="personalDetails"
    ref="personalDetailsGroup"
    @validation="myValidationEvent"
  >
    <!-- 嵌套子字段 -->
  </FormulateInput>
</template>

<script>
export default {
  methods: {
    myValidationEvent(groupValidationObj) {
      const groupErrors = {}
      // 遍历组内所有子字段，收集错误
      this.$refs.personalDetailsGroup.fields.forEach(field => {
        if (field.hasErrors) {
          groupErrors[field.name] = field.errors
        }
      })
      console.log('当前组内所有子字段错误：', groupErrors)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者henryaj