ArcoDesign 实现Modal对话框组件嵌套form表单组件验证成功后提交表单

ArcoDesign 实现Modal对话框组件嵌套form表单组件验证成功后提交表单

ArcoDesign组件库中，Form表单组件可以通过设定表单项的rules属性或在表单中绑定rules数组实现表单验证。如果想实现表单全部验证通过后再提交表单，则可以使用form组件的submit-success事件。然而，当form组件存在于modal组件中时，modal组件的确认按钮并不会触发form组件的验证，需要我们自己处理下。

代码如下：
 

<template>

  <a-modal v-model:visible="visible" @cancel="close" @before-ok="submit">
    <template #title>{{ form.nickname }} 重置密码</template>
    <a-form :model="form" :rules="rules" @submit="submit" ref="formRef">
      <a-form-item label="用户名" field="username">
        <a-input disabled v-model="form.username" />
      </a-form-item>
      <a-form-item label="新密码" field="password" validate-trigger="blur">
        <a-input-password  
            v-model:visibility="visibility"
            v-model="form.password"  
            placeholder="请输入新密码"
            :defaultVisibility="false"
            allow-clear
            />
      </a-form-item>
      <a-form-item label="确认密码" field="password2" validate-trigger="blur">
        <a-input-password  
            v-model:visibility="visibility1"
            v-model="form.password2" 
            placeholder="请再次输入新密码"
            :defaultVisibility="false"
            allow-clear
            />
      </a-form-item>
      
    </a-form>
  </a-modal>

</template>


<script setup>
import { ref, reactive } from 'vue'
import thirdUser from '@/api/third/thirdUser'
import { Message } from '@arco-design/web-vue'

const formRef = ref()
const visible = ref(false)
const form = ref({ id: undefined, name: undefined })

let visibility = ref(true);
let visibility1 = ref(true);

const open = (row) => {
    form.value = {id:row.id,nickname:row.nickname,phone:row.phone,username:row.username}
    visible.value = true
    formRef.value.clearValidate();
}

const submit = async (done) => {

    const error = await formRef.value?.validate();
    if (!error) {
        //提交表单逻辑
        const response = await thirdUser.updatePassword(form.value.id, { password: form.value.password, password2: form.value.password2 })
        if(response.success){
            Message.success(form.value.nickname+':密码已更新')
            done(true);//return true就会关闭对话框
        }
    }
  	return false;
} 


const rules = {
    password: [
        {
          required: true,
          message:'请输入新密码',
        },
      ],
    password2: [
        {
          required: true,
          message:'请再次输入新密码',
        },
        {
          validator: (value, cb) => {
            if (value !== form.value.password) {
              cb('两次密码不一致')
            } else {
              cb()
            }
          }
        }
    ],
}

const close = () => visible.value = false

defineExpose({ open })
</script>

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/169/1130.html

很赞哦！ (0)