arco-design-vue icon indicating copy to clipboard operation
arco-design-vue copied to clipboard

表单setFields方法,主动设置状态,若status为success则message不展示,实际应展示

Open shaoerkuai opened this issue 1 year ago • 2 comments

基本信息

  • 依赖包名 及 版本: @arco-design/[email protected]
  • 框架版本: Vue 3.4
  • 浏览器版本: chrome121.0.0.0

复现步骤

1.设置rules,可以主动触发校验 2.通过主动调用FormRef.value.validate可以主动触发校验 以上两个步骤,help属性的文本都能正常展示为输入校验失败的内容 3.通过setFields方法,强制认定某个输入错误,展示是正常的 3.通过setFields方法,强制认定某个输入是正确的,若不定义help,则feedback只有一个图标和绿色的边框,不会展示message字段

我疑问的是,既然错误提示和help是在同一个位置上的,那我通过setFields 也应该展示才对。

shaoerkuai avatar Feb 03 '24 16:02 shaoerkuai

通过setFields标记指定字段的验证状态为error,正常。

      FormRef.value.setFields({
        host: {
          status: 'error',
          message: '验证成功1'
        }

image

通过setFields标记指定字段的验证状态为success,以下就不展示这个message了

      FormRef.value.setFields({
        host: {
          status: 'success',
          message: '验证成功1'
        }
      })

image

我希望能像这样: image 而且不用定义我的help字段,随时赋值都可以生效

shaoerkuai avatar Feb 03 '24 16:02 shaoerkuai

function validateEnvironment() {
  // cb (errors: undefined | Record<string, ValidatedError>) => void
  FormRef.value.validate((errors) => {
    if (errors !== undefined) {
      // 清空 help 属性防止和验证文本冲突
      envStatus.value.message = ''
    } else {
      FormRef.value.setFields({
        host: {
          status: 'success',
        }
      })
      envStatus.value.message = '验证通过'
      EnvironmentLock.value = true
    }
  })
}

按照现在的实现,我需要单独控制help字段. 如果验证回调失败,需要先清空help文本对应的ref,否则校验文本不能展示。 验证回调成功,则需要在setField的基础上,单独再修改下help字段,虽然看上去也没什么问题,但是略嫌麻烦,这个问题应该SetField支持success就能解决

image

shaoerkuai avatar Feb 03 '24 16:02 shaoerkuai