ant design vue表单提交里面的方法引用不成功

Posted 2023-05-03

参考技术A 因为表单中可能有未定义的变量。
在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields部分未执行，也没有报错。原因：我使用了自定义校验 validator ，在自定义校验方法中有个错误，使用了未定义的变量。
使用validator 时，自定义方法中callback必须被调用。

ant design vue中点击编辑,表单数据的绑定

在一般的表单中，都是使用v-model来双向绑定数据，但是ant design vue中则会给予警告

1，获取数据：

 getNews({
          params: {
            Id: i   //传进来的id等值，具体看后端要什么
          }
        }).then(res => {
          console.log(res)
          if (res.code == 0) {
            this.form.setFieldsValue({
              title: res.data.title,
              introduce: res.data.introduce
            })
          }
        })

2.布局

 <a-form :form="form" @submit="handleOk" >
         <a-form-item label="联系人电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              v-decorator="[‘linkphone‘, {rules: [{pattern:new RegExp(/^1[3|4|5|6|7|8|9]d{9}$/,‘g‘),message: ‘请输入正确的手机号码‘},{required: true, message: ‘请输入联系人电话‘}]}]"
              placeholder="请输入联系人电话"
            />
          </a-form-item>
 <a-form >
<-此处可以添加正则验证->

3.提交数据

 handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log(values)
          editNews({
            action: ‘update‘,
            title: values.title,
            introduce: values.introduce
          }).then(res => {
            console.log(res)
            if (res.code == 0) {
              this.$message.success(‘当前已经成功修改/修改‘)
              this.getNewslist()
            }
          })
       
      })
    }

以上就是from表单中绑定和提交数据