In the early post 《Vue Advanced ( thirty ):vue Use in element-ui Perform form validation 》、《Vue Advanced ( Every single one three ): About vue.js element ui Form validation this.$refs[formName].validate() The problem of 》、《Vue Advanced ( One two one ): Notes for form verification 》 It mainly explains form Form verification should abide by the agreement and common problem solving methods . In the implementation of dynamic form , When the form item is dynamically generated in the background , if form The form property does not exist , But in data in rules Define the validation rules of form properties under ,IE The following will give the corresponding error prompt :"please transfer a valid prop path to form item
"
that , We need to change the form verification method to solve the problem .
But directly in <el-form-item>
Add rules,
<!-- Handling suggestions -->
<el-form-item :label="$t('pendingInfo.processInfo.lettopin')" prop="lettopin" v-if="oponionArr.length > 1 && oponionArr[1].isdisplay === '1'"
:rules="[{required: oponionArr.length > 1 && oponionArr[1].isinput === '1', message: $t('flowManage.ChgOprPsn.message.plsApprOpropin'), trigger: 'blur'},
{min: 0, max: 1000, message: $t('gplssignal.message.maxthousand'), trigger: 'blur'}]">
<cc-input type="textarea" :rows="4" style="width: 77%; word-break: break-all;"
v-model="formCommit.lettopin" :placeholder="$t('flowManage.ChgOprPsn.message.inputContent')"
:maxlength="1000"
@blur="formCommit.lettopin = formCommit.lettopin.trim()">
</cc-input>
The above implementation of dynamic form under the form attribute verification .