The dynamic form

Complex back-end management systems cannot escape the dynamic addition and subtraction of form items. Combined with Antd, these problems will occur:

  • How to add a new Form element to an already written Form?
  • How to add new form fields in a friendly way? Even a batch of fields?
  • How do these fields fit into the original validate system?

I consulted the dynamic add/subtract form items on the official website – examples, and “racked my brains” to prepare a passable demo.

Here’s a look at the renderings, and I’ll make a brief explanation:


How do I add elements dynamically?

It’s easy to add elements to a page, and front-end frameworks are data-driven these days.

So just maintain a variable (dynamicGroup in this example), add or subtract elements from the array according to the modification logic, and render the corresponding form label dynamically using V-for.

<! Each a-row is the same set of elements; A-col display different fields -->
<a-row v-for="(dynamicFields, index) of dynamicGroup" :key="index">
  <a-col>
    <! -- form-item field 1-->
  </a-col>
 <a-col>  <! -- form-item field 2-->  </a-col> </a-row> Copy the code

How do I add new form fields in a friendly way?

In dynamicGroup dynamic element collection, I put a “batch” of dynamicFields dynamicFields (also an array type).

// data
{
    dynamicGroup: [].    dynamicFields: [
    {
 fieldName: 'username'. / /...  },  {  fieldName: 'nickname'. / /...  } } Copy the code

Then add the default dynamicFields rule to the dynamicGroup as a new element in the corresponding add logic:

addDynamicGroup() {
    this.dynamicGroup.push(this.dynamicFields)
}
Copy the code

DynamicFields can be maintained if you have a batch of fields each time you add an operation, or an array if you have only one field.

Then each dynamicFields element can maintain attributes that are common to <a-form-item> (e.g. label, placeholder…).

{
    fieldName: 'username'.    label: 'Username'.    placeholder: 'Please enter a user name'.}
Copy the code

How to link with form verification?

You should note that I define a decorator function method (instead of key-value) for each field object in dynamicFields.

{
    fieldName: 'username'.    label: 'Username'.    placeholder: 'Please enter a user name'.    // on purpose
 decorator(key) {  return [key, {  rules: [{  required: true. message: 'Please enter a user name'  }]  }]  } } Copy the code

The reason is that each batch of added form items “s” are independent of each other, and the validation needs to be implemented by the V-decorator, and this directive needs to accept a “unique value” : ID, so the key is made dynamic here.

This allows the final form validation to be unique to each key.

<a-input :placeholder="item.placeholder" v-decorator="item.decorator(`tree[${index}][${item.fieldName}]`)" />
Copy the code

Notice that because each batch is added, each batch contains multiple fields. So this key needs to conform to the definition of a complex object (ANTD will help us parse it into form values) :

`tree[${index}].${item.fieldName}`;
Copy the code

Note that an array structure containing a complex object will not return values if you use the following form:

`tree[${index}] [${item.fieldName}] `; // It took me a long time to wake up to the reality of development

/ / and then wrote this code in the project (there is no time to delete - | |)
for (let i = 0; i < tree.length; i++) {
  const item = tree[i];
 for (let key in item) {  self.form.setFieldsValue({  [`tree[${i}] [${key}] `]: item[key],  });  } } Copy the code

conclusion

Example code can deal with most of the common dynamic form requirements, the example does not do the operation of deleting form items, but it is also very simple I believe you can handle!

Finally, the above code for the Demo example to illustrate, not to consider the place, hope forgive me.

This article is formatted using MDNICE