Form.Field

// @namespace Form.Field
import { Form } from 'rcfm'
const Field = Form.Field

Exception Types

@type {ExceptionInstance}
@description - Field 属性定义不存在

@prop {string} type = "FIELD_PROP_SCHEMA_NOT_EXIST"
@prop {string} [name = type]
@prop {Object} [data = {}]
@prop {string} [message]

@type {ExceptionInstance}
@description - Field 钩子函数定义不存在

@prop {string} type = "FIELD_HOOK_NOT_EXIST"
@prop {string} [name = type]
@prop {Object} [data = {}]
@prop {string} [message]

Shared Hooks

• ENABLE_VALUE_CALCULATION

  使用计算表达式计算并设定成员 value 属性设定值。

  // @example
  Form.install({
    type: 'Custom',
    hooks: [
      Field.hooks.use('ENABLE_VALUE_CALCULATION')
    ],
    schema: {
      props: [
        Field.schema.use('value'),
        Field.schema.use('calculation')
      ]
    }
  })
  

• ENABLE_VALUE_VALIDATION

  当 validation 当前值更新时或 value 当前值更新时，会使用前者校验后者，并清空或写入 value 错误信息。

  // @example
  Form.install({
    type: 'Custom',
    hooks: [
      Field.hooks.use('ENABLE_VALUE_VALIDATION')
    ],
    schema: {
      props: [
        Field.schema.use('value'),
        Field.schema.use('validation')
      ]
    }
  })
  

• ENSURE_VALUE_WITHIN_OPTIONS

  当 options 当前值更新时或 value 当前值更新为非空值时，校验 value 是否在 options 范围内， 并清空或写入 value 错误信息。

  // @example
  Form.install({
    type: 'Custom',
    hooks: [
      Field.hooks.use('ENSURE_VALUE_WITHIN_OPTIONS')
    ],
    schema: {
      props: [
        Field.schema.use('value'),
        Field.schema.use('options')
      ]
    }
  })
  

Shared Property Schemas

• name

  {
    prop: 'name',
    default: () => Reactive.guid(),
    schemable: false,
    calculable: false,
    rawValidation: null,
    validation: [{ presence: true }, { dataType: 'String' }, { unique: true }]
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
  }
  

• label

  {
    prop: 'label',
    schemable: false,
    calculable: false,
    rawValidation: null,
    validation: [{ presence: true }, { dataType: 'String' }],
    default: <global_i18n_defination>,
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
  }
  

• placeholder

  {
    prop: 'placeholder',
    schemable: false,
    calculable: false,
    rawValidation: null,
    validation: [{dataType: 'String'}],
    default: <global_i18n_defination>,
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
  }
  

• value

  {
    prop: 'value',
    default: null,
    schemable: false,
    calculable: false,
    rawValidation: null,
    validation: [{dataType: 'Array'}],
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
  }
  

• options

  {
    prop: 'options',
    default: [{ label: guid(), value: guid() }],
    schemable: false,
    calculable: false,
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
    rawValidation: null,
    validation: [{ presence: true }, { dataType: 'Array' }, function(member) {
      // A function ensures each option is unique.
    }],
  }
  

• editable

  {
    prop: 'editable',
    default: true,
    schemable: true,
    calculable: true,
    rawValidation: [{ presence: true }, { dataType: 'Boolean' }],
    validation: [{ presence: true }, { dataType: 'Boolean' }],
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
  }
  

• visible

  {
    prop: 'editable',
    default: true,
    schemable: true,
    calculable: true,
    rawValidation: [{ presence: true }, { dataType: 'Boolean' }],
    validation: [{ presence: true }, { dataType: 'Boolean' }],
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
  }
  

• validation

  {
    prop: 'validation',
    default: null,
    schemable: true,
    calculable: true,
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
    rawValidation: [{ dataType: 'Array' }, function(member) {
      // A function to ensure all defined validations are supported by the Validator module.
    }],
    validation: [{ dataType: 'Array' }, function(member) {
      // A function to ensure all defined validations are supported by the Validator module.
    }],
  }
  

• calculation

  {
    prop: 'calculation',
    default: null,
    schemable: true,
    calculable: true,
    validation: null,
    label: <global_i18n_defination>,
    placeholder: <global_i18n_defination>,
    hint: <global_i18n_defination>,
    rawValidation: [function(member) {
      // A function to ensure the defined calculation is supported by the Calculator module.
    }],
  }
  

Class Methods

.extend()

向表单成员类型注入 Field 分组，以自动生成子表单输入项类型。 该方法只应在注册输入项类型且希望自动注册子表单输入项类型时调用。

// Field.extend(type)
// @param {FormMemberType} type
// @returns {FormMemberType}

// @example
Field.extend({
  type: 'AgeField',
  group: ['Custom', 'Age'],
  hooks: [
    ...Form.Field.hooks.default()
  ],
  schema: {
    props: [
      Form.Field.schema.use('name'),
      Form.Field.schema.extend('label', {
        default: '这是一个年龄输入项',
        hint: '输入项的标题'
      }),
      Form.Field.schema.extend('placeholder', {
        default: '例如：20'
      }),
      Form.Field.schema.extend('value', {
        default: 20,
        validation: [{dataType: 'Number'}],
      }),
      Form.Field.schema.use('editable'),
      Form.Field.schema.use('visible'),
      Form.Field.schema.extend('validation', {
        default: [{presence: true}, {isInteger: true}]
      }),
      Form.Field.schema.use('calculation')
    ]
  }
})

.hooks.default()

// Field.hooks.default()
// @returns {ContextHook[]} - 返回输入项类型默认钩子函数定义数组

// @example
// returns -
// [
// Reactive.hooks.use('BLOCK_INVALID_PARENT', {accept: 'Fieldset'})
// Reactive.hooks.use('ENABLE_SCHEMA_DEFAULT')
// Form.Filed.hooks.use('ENABLE_VALUE_CALCULATION')
// Reactive.hooks.use('ENABLE_SCHEMA_VALIDATION')
// Form.Filed.hooks.use('ENABLE_VALUE_VALIDATION')
// ]
Field.hooks.default()

.hooks.use()

获取 Field 共用的某个钩子函数定义。

// Field.hooks.use(defName)
// @param {string} defName - 钩子定义名称
// @returns {ContextHook} - 钩子函数定义

// @examples
Field.hooks.use('ENABLE_VALUE_CALCULATION')
Field.hooks.use('ENABLE_VALUE_VALIDATION')
Field.hooks.use('ENSURE_VALUE_WITHIN_OPTIONS')

.schema.extend()

获取 Field 共用的某个属性定义，并基于其进行覆盖或扩展。

// Field.schema.extend(prop, defination)
// @param {string} prop - 属性名称，可用属性定义见本章 Shared Property Schemas
// @param {ReactiveMemberPropSchema} defination - 需要覆盖或扩展的属性定义
// @returns {ReactiveMemberPropSchema}

// @example
Field.schema.extend('value', {
  placeholder: 'E.g, 100',
  validation: [{presence: true}]
})

.schema.use()

获取 Field 共用的某个属性定义。

// Field.schema.extend(prop)
// @param {string} prop - 属性名称，可用属性定义见本章 Shared Property Schemas
// @returns {ReactiveMemberPropSchema}

// @example
Field.schema.use('value')