How to debug

The way new Vue().use() is introduced is not console.log in code, so we reference node_modules directly to use in our own components. As follows:

<template>
  <c-form>
    <c-form-item>
      <el-input />
    </c-form-item>
  </c-form>
</template>
​
import cForm from '.. /.. /node_modules/element-ui/packages/form/src/form.vue'
import cFormItem from '.. /.. /node_modules/element-ui/packages/form/src/form-item.vue'
​
export default {
  components: {
    cForm,
    cFormItem
  },
}
Copy the code

process

Use the dynamic addition or subtraction of form items in the elementUI website as an example: links

:prop=”‘domains.’ + index + ‘. Value ‘

Let’s look at the code for el-form-item

Start with the life cycle:

Cache the current item instance to the parent elForm component, get the value of the current item binding’s V-model, and add events that listen for input and change

Trigger input and change events:

The event raised is not in the Form component, but in the el-Input component of the form-Item package

For example, now that el-Input emits a blur event, we can listen for the event in the el-item-form

And then we call the el-item-formvalidateVerification method:

ValidateState is used to control the state of whether an error style is reported at the bottom

ValidateMessage is the message in our rules

      validate(trigger, callback = noop) {
        this.validateDisabled = false;
        // Filter out the rules required by the current trigger event according to trigger
        const rules = this.getFilteredRule(trigger);
        // Collect user information without checking
        if((! rules || rules.length ===0) && this.required === undefined) {
          callback();
          return true;
        }
        // There are three kinds of validating states as error success
        this.validateState = 'validating';
​
        const descriptor = {};
        // Trigger is used for incoming arguments to the AsyncValidator library
        if (rules && rules.length > 0) {
          rules.forEach(rule= > {
            delete rule.trigger;
          });
        }
​
        descriptor[this.prop] = rules;
        // AsyncValidator UI component libraries are mostly used with this
        const validator = new AsyncValidator(descriptor);
        const model = {};
        
        // E.g. 'domains.0. Value '= 'domains'
        model[this.prop] = this.fieldValue;
​
        validator.validate(model, { firstFields: true }, (errors, invalidFields) = > {
          this.validateState = ! errors ?'success' : 'error';
          this.validateMessage = errors ? errors[0].message : ' ';
​
          callback(this.validateMessage, invalidFields);
          this.elForm && this.elForm.$emit('validate'.this.prop, ! errors,this.validateMessage || null);
        });
      },
Copy the code

The this.$refs.form.validate() method we use to click the button is provided by the el-Form component, which caches instances of each Item-Form for collective validation.