@alitajs/ dForm Mobile Form library 3.0 is coming

Review 2.0

preface

In order to address the fears of mobile H5 developers who are dominated by long forms, we launched the first version of DForm in early 2020.

After more than a year of precipitation, the company has been tempered in dozens of projects, continuous improvement and optimization. Upgraded to stable version 2.0.

Basic Functions

We borrowed the Form component from antd@4 to rewrap the underlying Form library.

Add radio radio, checkbox, rangeDatePicker time interval selector and other components that antD-Mobile library does not have.

One line of code to achieve a single page form value assignment operation.

Make a line of configuration code to modify the form style of the whole project in a unified manner, and ensure the form style unity in the case of multi-person collaborative development of the project.

Visual isDev developer pattern solution. @alitajs/ dForm Visual developer mode

The programme covers:

  • Quick implementation of UI
  • Can achieve all assignments at once
  • The form submits values once
  • Integrate multiple component forms
  • Support for dynamic forms
  • One line of code configures the project form style

Second, powerful new features

After the accumulation of dozens of projects, we collected new demands from our friends. At this point, the new functionality of DForm3 is becoming clear:

1. Error prompt when the form is submitted incorrectly

We took antD-Mobile’s List component out of the DForm, increasing the flexibility of the form style.

And every time the submit form data method of Submit () is executed, the error message is obtained and displayed on the page.

2, cascade

For a form with a fixed field, you can customize the onChange method of one component to trigger the configuration of other components.

Dynamic forms can be a bit of a headache.

To do this, we added the relatives attribute to the Dform. Use to configure all cascading relationships across the form.

The four cascading rules include:

  • Modifies the value of any component of the form
  • Adjust whether any component of the form is required
  • Adjust whether any component of the form is hidden
  • Adjusts whether any component of the form is uneditable

With configurable cascading rules, we can free ourselves from the onChange approach. Improve the development logic efficiency of complex forms.

const relatives = {
  sex: [{type: "changeFormValue"./ / modify the value
      targetValue: ["woman"].// Select 'woman' for the sex component
      targetSet: [{targetField: "username".// Change the value of 'username' to 'Liz'
          targetValue: "Liz",},],}, {type: "required".// Mandatory
      targetValue: ["woman"].// Select 'woman' for the sex component
      targetSet: [{targetField: "date".// Date component is mandatory},],},... ] . };Copy the code

Take a look at the effect:

3, grouping

Many forms are not directly displayed on the interface in the form of long forms, but are divided into modules, such as personal information, family information, business information, etc.

Forms are stored in various modules. There is no need to define multiple forms on a page, but it is difficult to achieve uniform style and single form processing after partitioning.

For this we export grouped components using const {Group} = DynamicForm. Help small partners automatically achieve card style.

The code implementation is more convenient, but also can support multi-layer card nesting:

<DynamicForm {... formProps}><Group type="card" title="Card One" required>
    <DformInput
      fieldProps="username"
      required
      placeholder="Please enter"
      title="Username"
      defaultValue="Little red"
    />
    <Group type="card" title="Card Two" required>
      <DformRadio fieldProps="sex" title="Gender" required data={sexData} />
    </Group>
  </Group>. </DynamicForm>Copy the code

If the DForm is implemented as JSON, we also provide the ability to nest multiple layers of cards:

const data = [
  {
    type: "group".fieldProps: "group1".groupProps: {
      type: "card".title: "Card One".required: true,},children: [{type: "input".fieldProps: "username".required: true.placeholder: "Please enter".title: "Username".defaultValue: "Little red"}, {type: "group".fieldProps: "group2".groupProps: {
          type: "card".title: "Card Two".required: true,},children: [{type: "radio".fieldProps: "sex".title: "Gender".data: sexData,
            required: true,},],},],},... ] ;Copy the code

4. Promote componentized development

In version 2.0, we mainly promoted JSON in a similar way to implementing dynamic forms, but in real business development, we found that many scenarios added custom styles to forms.

Therefore, the form does not necessarily have to be displayed in a row order, but may be embedded in the middle of the custom style. If the development form is still json, it will bring great inconvenience.

So we strongly recommend exporting each component from @alitajs/ dForm to implement the business.

Both componentized and JSON development have the same amount of code and API.

5. Assign default values to individual components

In addition to the formsValues assignment, the defaultValue for defaultValue is added under each component.

FormsValues has greater assignment permission than defaultValue. And if both are assigned, the formsValues value is preferred.

Participants of the Training Camp phase 001

  • Chen Xiaocong: github.com/xiaohuoni
  • Xue Shidong yu: github.com/DIYCCC
  • Chen Shuhang: github.com/hang1017
  • Lin Junyuan: github.com/Dreamljy
  • 171Time to submit
  • 9598Lines of code
  • 10Late on a weekday

This dform@3 is the content of the first phase of the training camp. Through the joint efforts of our partners, we have completed all the requirements in the shortest time. We would like to thank them for their contribution to the successful completion of this task.

conclusion

V3.0 is not the end of the road, dForm is still on the road, welcome to provide better ideas.

Welcome to send us pr or issues.

Official document: dform.alitajs.com/

Making: github.com/alitajs/Dyn…

Welcome to the top left corner of the official document. Give dForm a star. Give the author a little support and motivation.