Form

表单容器，提交一条记录数据

API

通用属性见： 容器通用属性

参数	说明	类型	默认值
model	数据模型	string	-
isMultiColumn	是否平铺展示	boolean	true
unSaveNotify	未保存是否提示	boolean	false
onFieldValueChange	当字段值发生变化时触发	(fieldName: string, value: any) => void	-
columnNum	固定列数	number	null

通用标签见： 容器通用标签

Form 中可用标签 MultiField

参数	说明	类型	默认值
label	字段显示标题	string	-
combine	组合形式，字符串（待开发），自定义函数	string | (comp1, comp2) => [comp1, comp2]	-

校验规则

在表单中可以配置字段的校验规则, 目前支持的校验规则有: 详细见: 字段校验

注意只有设置了才会触发表单校验

• required 是否必填
• pattern 正则表达式校验
• validator 自定义校验方法, 方法参数如下:
  • rule  当前的校验规则
  • value 当前字段的值
  • callback 校验完成后回调,参数为 Error 信息,如果传没有参数,则代表校验通过
• message 校验失败后提示信息

用法

典型表单

<View title="新增人员">
  <Form key="person" model="trantor_doc_Person" :isMultiColumn="false" unSaveNotify>
    <Fields>
      <Field name="name" />
      <Field name="avatar" />
      <Field name="age" />
      <Field name="password" />
      <Field name="credentials" />
      <Field label="部门名称" name="department.name" />
      <Field name="birthday" />
    </Fields>
    <Actions>
      <Action label="新增" type="Submit" @confirm="return '确认提交'" action="trantor_doc_Person_create" />
    </Actions>
  </Form>
</View>

关联表单

lookUpFrom 属性可以将某个表单的值用作另外一个表单的字段提交，在多个 Form 一起提交的场景非常有用。

<View title="编辑公司">
  <Record key="department" model="trantor_doc_Department" />
  <Form model="trantor_doc_Department" @onFieldValueChange="onFieldValueChange" lookupFrom="department">
    <Fields>
      <Field name="name" />
      <Field name="company" />
      <Field name="isDeleted" />
    </Fields>
    <Actions>
      <Action label="新增" :show="!this.data.id" type="Submit" action="trantor_doc_Department_create" />
      <Action label="修改" :show="!!this.data.id" type="Submit" action="trantor_doc_Department_update" />
    </Actions>
  </Form>
  <Form model="trantor_doc_Company" :show="isShow" lookupFrom="department.company">
    <Fields>
      <Field readonly name="name" />
    </Fields>
  </Form>
  <!--
   容器 department 在获取数据时会把关联的 staff 数据也返回回来，并填充数据至 TableForm，
   department 数据容器提交时，会把 TableForm 中的数据作为 staff 一起提交
  -->
  <TableForm title="公司人员" model="trantor_doc_Person" lookupFrom="department.staff">
    <Fields>
      <Field name="name" />
      <Field name="age" />
      <Field name="credentials" />
      <Field name="birthday" />
    </Fields>
  </TableForm>
</View>

字段校验

<View title="校验">
  <Form title="必填" model="trantor_doc_Person" >
    <Fields>
      <Field name="name">
        <Validations>
          <Validation required message="不能为空" />
        </Validations>
      </Field>
    </Fields>
  </Form>

  <Form title="正则匹配" model="trantor_doc_Person" >
    <Fields>
      <Field name="name">
        <Validations>
          <Validation pattern="^[a-z]+$" message="必须为字母" />
        </Validations>
      </Field>
    </Fields>
  </Form>

  <Form title="回调函数" model="trantor_doc_Person" >
    <Fields>
      <Field name="name">
        <Validations>
          <Validation @validator="handlerValidator" />
        </Validations>
      </Field>
    </Fields>
  </Form>
</View>

MultiField

<View title="字段多选">
  <Form model="trantor_doc_Person">
    <Fields>
      <GroupField>
        <MultiField label='时间区间1' @combine="(field1, field2) => [field1, field2]">
          <Field name="createdAt" label='开启'/>
          <Field name="createdAt"/>
        </MultiField>
      </GroupField>
      <MultiField label='时间区间' >
        <Field name="createdAt"/>
        <Field name="createdAt"/>
      </MultiField>
    </Fields>
  </Form>
</View>