vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
20.02k stars 3.77k forks source link

循环formItem的校验规则的validator方法无法像密码和确认密码一样同步校验另一个formItem #6846

Closed wuyadan closed 1 year ago

wuyadan commented 1 year ago

Version

4.0.0-rc.6

Environment

uos 1050,Google Chrome 90.0.4430.72,vue3

Reproduction link

Edit on CodeSandbox

Steps to reproduce

循环的forItem,在校验某个formItem的同时无法校验另一个有关系的formItem,使用validateFields不起作用,使用类似密码和确认密码的校验。

What is expected?

循环的formItem可以联动校验

What is actually happening?

循环的formItem之间无法同步校验

github-actions[bot] commented 1 year ago

Hello @wuyadan. Please provide a online reproduction by forking this link for vue2link for vue3 or a minimal GitHub repository. Make sure to choose the correct version.

你好 @wuyadan, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 for vue2此处 for vue3 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。

aibayanyu20 commented 1 year ago

form没有依赖联动校验,需要自己实现demo

lhywell commented 5 months ago
<a-form
    ref="formRef"
    name="dynamic_form_item"
    :model="dynamicValidateForm"
    v-bind="formItemLayoutWithOutLabel"
  >
    <a-form-item
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.key"
      v-bind="index === 0 ? formItemLayout : {}"
      :label="index === 0 ? 'Domains' : ''"
      :name="['domains', index, 'value']"
      :rules="{
        required: true,
        message: 'domain can not be null',
        trigger: 'change',
      }"
    >
      <a-input
        v-model:value="domain.value"
        placeholder="please input domain"
        style="width: 60%; margin-right: 8px"
      />
      <MinusCircleOutlined
        v-if="dynamicValidateForm.domains.length > 1"
        class="dynamic-delete-button"
        @click="removeDomain(domain)"
      />
    </a-form-item>
</a-form>

可以主动触发formRef.value.validate([['domains', index, 'value']]);