Recently, I used Ant Design Vue as a component library for the project. This component looks very detailed in the document, but it also encountered some unexpected problems. Finally, I could not solve the problem by looking at the document, so I had to look at the source code. When an input is added and then deleted, it will prompt you to fill in the deleted input when submitting the form. Another problem is that when the completed content is deleted and submitted, the deleted content can still be submitted to the background
form.getFieldValue('email').splice(index, 1)
form.getFieldValue('truename').splice(index, 1) form.setFieldsValue({ keys: keys.filter(key => key ! == index), email: form.getFieldValue('email'),
truename: form.getFieldValue('truename')})Copy the codeThe setFieldsValue method is not deleted successfully, but the setFieldsValue method is not deleted successfully.
this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true })
this.form.getFieldDecorator('email', { initialValue: [], preserve: false })
this.form.getFieldDecorator('truename', { initialValue: [], preserve: false })
Copy the codeThe problem was solved when I looked at the code and found that the documentation did not mention this.form.clearfield (“). If the keys are not removed in order, the values array should be changed to preserve: false. If the keys are not removed in order, the values array should be changed to preserve: false. In this way, when deleting or adding, the keys index always corresponds to the VALUES array. There will be no empty element phenomenon in the VALUES array. When submitting the form, add the fields that need to be verified, and the problem will be solved
<template>
<div class="invite-new">
<div class="invite-second-crumb">
<second-crumb />
</div>
<div class="invite-box"</h2> <p> Send the invitation to the specified email address, and the other party can join the team directly by setting up their personal account </p> <div class="invite-list">
<a-form
ref="inviteForm"
layout="inline"
:form="form"
class="demo-form-inline"
@submit.prevent="submitHandle('inviteForm')"
>
<div
v-for="(item,index) in formData"
:key="index"
class="invite-item"
>
<a-form-item
:required="false"
>
<div class="input_email">
<a-input
v-decorator="[
`email[${index}] ', {validateTrigger: ['blur'], rules: [{required: true, whitespace: true, message: 'Please enter email'}, {validator: IsEmailRe}, {validator:isErrorEmail}, {type:'email', message: 'email'}]}]"
placeholder="Please enter email address"
/>
</div>
</a-form-item>
<a-form-item
v-if="item.isreg *1 === 1"
class="member-name"
>
<span class="has-register-btn"> Registered user </span> </a-form-item> <a-form-item class="member-name"
>
<a-input
v-decorator="[
`truename[${index}] `, {rules: [{required: true, the message: 'please enter the name'}]}]. ""
placeholder="Name"
/>
</a-form-item>
<a-form-item>
<a-button
v-if="form.getFieldValue('keys').length > 1&&(index! = = 0)"
class="del-invite-btn"
@click="delteFormItem(index)"- button > delete < / a > < / a - form - item > < / div > < div class ="invite-item">
<a-form-item>
<a-button
class="add-invite-btn"
@click="addItem"New < / a > - the button > < / a - form - item > < / div > < div class ="invite-item">
<a-form-item>
<a-button
type="primary"
html-type="submit"
:disabled="loading"</a-button> </a-form-item> </div> </a-form> </div> </div> </template> <script> import SecondCrumb from'@/components/pc/organization/invite/SecondCrumb'
import { mapActions } from 'vuex'
export default {
components: {
SecondCrumb
},
data () {
return {
initTeamId: ' ',
isLoading: false,
submitting: false,
initItem: {},
formData: [
{
email: ' ',
truename: ' ',
isreg: 0
}
]
}
},
computed: {
loading () {
return this.submitting
},
args () {
return this.$route.query
},
keys () {
let arr = []
this.formData.forEach((val, index) => {
arr.push(index)
})
return arr
}
},
watch: {
},
created () {
this.form = this.$form.createForm(this)
this.form.getFieldDecorator('keys', { initialValue: [], preserve: true })
this.form.getFieldDecorator('email', { initialValue: [], preserve: false })
this.form.getFieldDecorator('truename', { initialValue: [], preserve: false})},mounted() { }, methods: { ... mapActions('organization/invite'['ajaxSave'.'ajaxEmail']),
addItem () {
this.formData.push(
{
email: ' ',
truename: ' ', isreg: 0 } ) const { form } = this form.setFieldsValue({ keys: DelteFormItem (index) {const {form} = this // can use data-binding toset
this.formData.splice(index, 1)
form.getFieldValue('email').splice(index, 1)
form.getFieldValue('truename').splice(index, 1)
form.setFieldsValue({
keys: this.keys,
email: form.getFieldValue('email'),
truename: form.getFieldValue('truename')})},setFormData (data) {
const { formData } = this
for (let i = 0; i < data.length; i++) {
formData[i].truename = data[i]
}
},
submitHandle () {
this.form.validateFieldsAndScroll(['keys'.'email'.'truename'], async (err, values) => {
const { form, formData } = this
if(! err) { this.setFormData(form.getFieldValue('truename'))
const chain = await this.ajaxSave()
chain.params({ cid: this.args.cid * 1, inviteinfo: formData })
.setForm(this.form)
.fetch()
}
})
},
isEmailRe (rule, value, callback) {
const length = this.form.getFieldValue('email').filter(item => item === value).length
if (length > 1) {
callback(new Error('Mailbox repeat! '))}else {
callback()
}
},
async isErrorEmail (rule, value, callback) {
const index = this.form.getFieldValue('email').indexOf(value)
const item = this.formData[index]
let chain = await this.ajaxEmail()
await chain.params({ email: value, cid: this.args.cid })
.onNetSuccess((raw) => {
const res = raw.data
if(! res.error) {if (res.payload.isreg === 1) {
// this.isHasReg = true
item.isreg = 1
item.truename = ' '
} else {
item.isreg = 0
}
item.email = value
} else {
// item.msg = res.message
// item.isreg = 3
if (value && res.message) {
callback(new Error(res.message))
} else {
callback()
}
}
})
.fetch()
}
}
}
</script>
Copy the code