Dynamic Form

介绍

基于react-hook-form、tea-component组件库实现表单动态渲染，目前支持类型有：

• text
• textArea
• number
• radio
• switch
• array
• object
• checkbox
• select
• tagSelect
• date
• password
• custom

demo

正则验证规则： isRequired、minLength、maxLength、pattern、validate依次进行校验

<DynamicForm
      handleSubmit={onSubmit}
      schema={{
        // formOptions: {formOptions}
        telephone: {
          title: '电话',
          type: 'text',
          placeholder: '请输入电话',

          helperText: '来个提示吧',
          validOptions: {
            isRequired: true,
            minLength: 8,
            maxLength: 30,
            pattern: /[A-Za-z]{3}/,
            patternMsg: '提示验证不通过的信息',
            validate: async (value: any) => {
              // 1. 验证认证属性
              // 2. 验证正则
              if (value !== 'gaoxin') {
                return 'you should gaoxin1'; // 这里提示正则字段的内容
              }
              return true;
            },
          },
        },
        firstName: {
          title: '昵称',
          type: 'text',
          placeholder: '请输入姓名',
          validOptions: {
            isRequired: true,
            // minLength: 8,
            // maxLength: 30,
            // pattern: /[A-Za-z]{3}/,
          },
        },
        password: {
          title: '密码',
          type: 'password',
          placeholder: '请输入密码',
          validOptions: {
            isRequired: true,
            // minLength: 8,
            // maxLength: 30,
            // pattern: /[A-Za-z]{3}/,
          },
        },
        age: {
          title: 'age',
          type: 'number',
          defaultValue: 18,
          min : 12,
          max : 100,
        },
        sex: {
          title: 'sex',
          type: 'radio',
          defaultValue: 'male',
          radios: [{
            value: 'male',
            label: '男'
          }, {
            value: 'female',
            label: '女'
          }],
         
        },
        hobbies: {
          title: '兴趣',
          type: 'checkbox',
          defaultValue: '1',
          checkboxes: [{
            value: '1',
            label: '打球'
          }, {
            value: '2',
            label: '滑雪'
          }]
        },
        desc: {
          title: '描述',
          type: 'textArea',
          defaultValue: '66',
        },
        isOpen: {
          title: '是否开启',
          type: 'switch',
          defaultValue: true,
        },
        createDate: {
          title: '开始时间',
          type: 'date',
        },
        fruits: {
          title: '水果',
          type: 'select',
          defaultValue: '2',
          options: [{
            value: '1',
            label: '香蕉'
          }, {
            value: '2',
            label: '西瓜'
          }]
        },
        custom: {
          type: 'custom',
          component: CustomField,
          props: {
            label: '我是自定义的组件文本1',
            label2: '我是自定义的组件文本2',
          },
        },
      }}
    />
```code




## 更新日志
v1.4.3
- 【FEAT】表单分组的展开/收起按钮文本支持英文

v1.4.3-bata.1
- 【FEAT】增加表单分组功能：表单分组展示、设置每表单组默认显示的字段、展开和隐藏字段

v1.3.3
- 【FEAT】固定密码组件的bubblePlacement为right-start

v1.3.2
- 【FEAT】tagSelect标签改为optionsOnly

v1.3.0
- 【FEAT】表单title支持自定义

v1.1.4
- 【FEAT】DataPicker组件支持英文

v1.1.3
- 【FEAT】使用context方式，校验显示为英文

v1.1.1
- 【BUG】修复增量更新时，数组组件如tagSelect清空时返回值错误的问题

v1.0.7
- react hook formv6对于a.666666666嵌套数字时，submit字段会缺失，需要在业务中对字段名进行富化：__CIAM__FORM__TAG

v1.0
- [BREAKCHANGE]返回的日期类型为时间戳，非Moment类型
- [BREAKCHANGE]必填符号位置在label的后面
- 支持增量修改功能
- 解决react hook form v6 字段嵌套后未返回字段的bug（添加兼容判断）