background

Vue’s EL-Form provides form validation. The general usage is to set validation rules with the :rules property and bind validation rules with the PROP property of EL-Form-Item. But in one case, if the form is dynamically generated in the V-for tag, how do you use el-form-item to validate it?

Also, what if the form being verified is a Readonly form in the El-Popover component and blur triggers instability?

This article continues to share solutions to both problems.

V-for traversal of the form validation

We use the :rules attribute in el-form-item, while the prop attribute addresses the loop element directly. This usage assumes that an el-form element is wrapped around the loop, with v-for inside the El-Form-Item.

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item Prop ="email" label=" email" :rules="[{required: true, message: 'please enter email address ', trigger: 'blur'}, {type: 'email', message: 'Please enter the correct email address ', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, Index) in dynamicValidateForm. Domains: "label =" 'domain' + index "is: the key =" domain. The key ": prop = 'domains.'" + index + 'value'" :rules="{required: true, message: 'Domain name cannot be empty ', trigger: 'blur'}" >< el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)"> delete </el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')"> </el-form-item> <el-button @click="resetForm('dynamicValidateForm')"> </el-button> </el-form-item> </el-form>Copy the code

For el-form-item in the loop, set the :rules property for el-form-Item and set its prop property to follow the following rules:

Prop = loop object. Subscript. SubattributeCopy the code

Operation effect:Through repeated testing, I found a simpler approach, v-for for El-FROM. The essence of each loop is a separate El-Form validation, just like a normal form validation, which is easy to write and understand.

Creates the el-Form validation inside the loop

This method creates an El-form within the V-for statement. Its modle refers to the element of the current loop, and its el-form-item refers directly to the child attributes of the current loop element.

For example, in the following feature configuration page, each rule contains three pieces of information name, category, and related fields:For validation, the configuration information for each rule is wrapped in an El-form, just like normal form validation.

First, define the rules object:

Rules1: {name: [{required: true, message: 'Please enter the business name ', trigger: 'blur'},], typeName: [{required: true, message: 'Please select classification ', trigger: 'change'},], relation: [{required: true, message:' please select field ', trigger: ['blur', 'change']},],},Copy the code

Next, write el-form and el-form-item and set the verification attribute:

<el-row :key="index" v-for="(item,index) in data.rules"> <el-col :span="20" > <el-form :model="item" :rules="rules1" Ref =" 'ruleForm${index}' "> <el-form-item label=" "Prop ="name" > <el-input clearable V-model ="item.name"/> </el-form-item> <el-form-item label=" " prop="typeName" > <el-popover rigger="click" placement="bottom"> <el-tree :ref="`tree${index}`" :data="typeInfos" node-key="name" :current-node-key="item.typeName" :props="defaultProps" :filter-node-method="filterNode" @node-click="changeFieldSelector(index)"> </el-tree> <el-input V-model ="item.typeName" readonly placeholder=" select selector "> </el-input> </el-popover> </el-form-item> <el-form-item prop="relation" label=" ":label-width="formLabelWidth"> <el-select clearable V-model ="item.relation" placeholder=" placeholder "> </el-select> </el-form-item> </el-form> <i class="el-icon-circle-plus-outline" @click="addRule(index)"/> <i class="el-icon-circle-close" @click="deleteRule(index)"/> </el-col> </el-row>Copy the code

In each v-for round, the el-form is created, and the model refers to the v-for iteration item:

  1. v-for=”(item,index) in data.rules”
  2. Internal reference iterators: el-form :model=”item” :rules=”rules1″
  3. El-from-item normally references the attributes of item:

Finally, the verification of each el-Form is triggered in a loop when saving:

For (let I = 0; i < this.data.rules.length; i += 1) { this.$refs[`ruleForm${i}`][0].validate((valid) => { if (! valid) { isOk = false; return false; } return true; }); }Copy the code

The prop property is not specified properly

When specifying a prop inside a loop, this exception is likely to occur:That is, the property prop field on the EL-Form-Item must be a direct child of the binding Model field in the parent component el-Form.

Therefore, we must be careful with prop assignment to ensure that each el-Form-item prop matches the properties in the Rules object.

The validation form is located in el-popover

What if the validation form is a readonly form for the el-popover popup option?

The second form in the previous example, “Belonging category,” is a pop-up tree selection component that binds the value to a Readonly form after selecting the tree node, which is the form we want to verify. There is a problem: after onblur is triggered for the read-only component, the error message does not disappear even if the element is selected through the popup.

To solve this problem, you can manually trigger a checksum in the el-Tree’s selected event:

ChangeFieldSelector (index) {const tree = this.$refs[' tree${index} ']; Const data = tree[0].currentNode.node.data; const data = tree[0].currentNode.data; Console. log(' click log type ${index + 1} and select ${data.name} '); Vue.set(rule, 'typeName', data.typeName); Vue.set(rule, 'type', data.type); $refs[' ruleForm${index} '][0]. Validate ((valid) => {if (! valid) { return false; } return true; }); },Copy the code

The revelation of

The text introduces three form verification issues, which complement the previous section and are more complete than those on the official website

  1. V -for dynamically generated form verification, how to verify
  2. Please Transfer a valid prop Path to form Item attribute binding problem;
  3. Readonly property in el-popover, how to verify