Form the sample

Forms have always been the difficulty in the development of web projects. Forms involve VARIOUS pits such as UI, interaction, verification, interface, backfill and so on. A unified design idea is needed when designing form modules

  • Configuration form
  • Unified form structure
  • Rich API, simplify error, prompt and other operations
  • Supports linkage between any form elements
  • Native wechat all form components support

How do I use form components

First, we need to introduce the queryUI core library, see GITHUB

The sample code

https://github.com/webkixi/aotoo-xquery 
=> pages/form    
Copy the code

Use of form components

The queryUI form is generated from a configuration file, and the form attributes are roughly as shown below

Text form usage

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" /> 
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    title: 'Textbox Form area'.desc: 'Explanatory information'.input: [{id: 'aaa'.type: 'text'.title: 'text'.placeholder: 'Digital input keyboard'.error: 'Error message'.desc: 'Explanatory information'
        bindblur: 'onbindblur'.bindinput: 'onbindinput'.bindfocus: 'onbindfocus'.bindconfirm: 'onbindconfirm'.bindkeyboardheightchange: 'onbindkeyboardheightchange',},]}, {title: 'Digital Form area'.input: [{id: 'ccc'.type: 'number'.title: 'Integer type'.placeholder: 'Digital input keyboard'.bindblur: 'onBlur'},
      {id: 'ddd'.type: 'idcard'.title: Identity card.placeholder: 'ID card input keyboard'.bindblur: 'onBlur'},
      {id: 'eee'.type: 'password'.title: 'password string'.maxlength: 30.placeholder: 'Hidden password string'.bindblur: 'onBlur'}]}, {title: 'TEXTAREA'.input: [{id: 'aaa'.type: 'textarea'.title: 'Text field'.placeholder: 'Input text'.bindblur: 'onBlur'}},],]const mthSet = {
  onbindblur(e) {
    console.log('=====text', e.detail.value);
  },
  onbindinput(e) {
    console.log('=====text', e);
  },
  onbindfocus(e) {
    console.log('=====text', e);
  },
  onbindconfirm(e) {
    console.log('=====text', e);
  },
  onbindkeyboardheightchange(e) {
    console.log('=====text', e);
  },
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

The slider form

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    title: 'Event binding'.input: [{id: 'test_slider'.title: 'slider'.type: 'slider'.value: 50.bindchange: 'onSliderChange'.bindchanging: 'onSliderChanging',}]},],const mthSet = {
  onSliderChange(e){
    console.log('======= slider change', e);
  },
  onSliderChanging(e){
    console.log('======= slider changing', e);
  },
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

Check box/checkbox and form event binding

Synchronous micro channel applets official native method

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    title: 'Event binding'.input: [{name: 'test_checkbox1'.type: 'checkbox'.title: 'Check box'.value: ['1'.'3'].values: ['1'.'2'.'3'].titles: ['basketball'.'football'.'badminton'].bindchange: 'onbindchange'}}]],const mthSet = {
  onbindchange(e) {
    console.log('======= checkbox', e);
  },
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

Score form event binding

The native component does not contain this type of form

  • Default assignment is supported
  • Click assignment is supported
  • Drag assignment is supported

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    itemClass: 'input-rating-list'.title: 'Scoring Form'.input: {
      id: 'ratingit'.title: 'Service Attitude'.type: 'rating'.value: 4./ / the default value
      max: 7.// Maximum number of stars
      tap: 'ratingChecked'.// Respond to the click/slide event callback}},]const mthSet = {
  ratingChecked(e, param) {
    console.log('======= rating', e);
  },
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

Picker form event binding

wxml

    <ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
Copy the code

js

    const Pager = require('.. /.. /components/aotoo/core/index')
    const config = [
      {
        title: 'Event binding'.input: [{id: 'test_pickers2'.type: 'picker'.title: 'title'.values: [[{title: The 'cat'.id: '100'.select: true},
                {title: 'dog'.id: '101'},], [{title: 'the tiger'.id: '102'},
                {title: 'the lion'.id: '103'},
                {title: 'the leopard'.id: '104'.select: true},
                {title: 'dogs'.id: '105'},]].bindchange: 'pickerChange'.bindcolumnchange: 'columnChangeAction',},]},],const mthSet = {
      pickerChange(e) {
        console.log(e);
      },
      columnChangeAction(e){
        if (e.detail.column === 0) {
          if (e.detail.value === 0) {
            this.updateNextColumn([  // Update the next column
              {title: 'the tiger'.id: '102'},
              {title: 'the lion'.id: '103'},
              {title: 'the leopard'.id: '104'.select: true},
              {title: 'dogs'.id: '105'}},])if ( e.detail.value === 1) {
            this.updateNextColumn([ // // updates the next column
              {title: 'the tiger'.id: '102'},
              {title: 'the lion'.id: '103'.select: true},
            ])
          }
        }
      },
    }

    Pager({
      data: {
        formConfig: {
          ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
          methods: mthSet
        },
      }
    })
Copy the code

The this.updateNextColumn method updates the next column of data, entering an array

The values

We can use the event method (e.dail.value) for the value and provide the getValue() method to get all the form values at once

  • getValue([id])

    Get the value of the form element from an instance of the form
    1. Set ID Gets the value of the form element with the specified ID
    2. Gets the values of all form elements without specifying an ID

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    title: 'Event binding'.input: [{id: 'aaa'.type: 'text'.title: 'text'.placeholder: 'Please enter relevant text'.value: 'Toil, toil, toil, toil'.bindblur: 'onbindblur',},]},]const mthSet = {
  onbindblur(e) {
    console.log('=====text', e.detail.value);
    let result = this.getValue()  // Return an object with the key name and the real-time value,type, and other attributes of the form element
  },
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

Form the assignment

Click the button to assign a value to the form

  • SetValue (id, value) assigns a value to a form with a specified ID

  • Empty ([id]) clears all forms, or the form with the specified ID

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    title: 'Event binding'.input: [{id: 'aaa'.type: 'text'.title: 'text'.value: 'Study hard'
      },
      {
        id: 'bbb'.type: 'text'.title: 'text'.value: 'Up every day'
      },
      {
        id: 'ccc'.type: 'button'.size: 'default'.value: 'Click clear'.placeholder: 'Configured as invalid form'.itemStyle: 'height: 50px; line-height: 50px; background-color: red; '.tap: 'onTap'}},],]const mthSet = {
  onTap(e) {
    this.empty()  This.empty ('aaa') specifies to empty AAA
    this.setValue('ccc'.'Click clear')  // Because button value is empty, reassign
  }
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

Setting prompt Message

In the preceding example, enter any data or enter 111 correctly

  • AddWarn (ID, message) Adds warning information

  • RemoveWarn (ID) Remove warning information

  • AddDesc (id, message) Adds a warning message

  • RemoveDesc (id) Removes warning information

wxml

<ui-form wx:if="{{formConfig}}" dataSource="{{formConfig}}" />  
Copy the code

js

const Pager = require('.. /.. /components/aotoo/core/index')
const config = [
  {
    title: 'Event binding'.input: [{id: 'aaa'.type: 'text'.title: 'text'.placeholder: 'Please enter relevant text'.bindblur: 'onbindblur',},]},]const mthSet = {
  onbindblur(e) {
    let value = e.detail.value
    if(value ! = ='111') {
      this.addWarn('aaa'.'Please enter correct information')}else {
      this.removeWarn('aaa')
    }
  }
}

Pager({
  data: {
    formConfig: {
      ? id: 'myForm'.formStyle: 'width: 90vw; '.data: config,
      methods: mthSet
    },
  }
})
Copy the code

The source code

GITHUB

/pages/form

The following small program DEMO contains pull-down menus, generic filter lists, index lists, Markdown (including tables), scoring components, fruit slot machines, folding panels, two-column classification navigation (left and right), scratch cards, calendars, and other components