跳转到内容
Trantor 文档

Form

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

API

IFormProps

参数类型说明默认值
idstringid-
isMultiColumnboolean单列模式-
onFieldValueChange(fieldName: string, value: any) => void该方法即将废弃，请使用onFieldChange替代。当字段值发生变化时触发-
onFieldChange(args?: {value: any, fieldName: string, record: IDictionary }) => void字段值改变时触发的方法, 该属性被定义后不再执行onFieldValueChange回调-
unSaveNotifyboolean未保存是否提示-
columnNumnumberForm分栏数-
onEnterstring绑定一个key与Action匹配，按下回车键触发匹配的action-
layout’vertical’ | ‘horizontal’ | ‘inline’控制表单布局模式，默认为vertical-
autoGridRowboolean是否采用控件内置的grid-row规则，默认true-

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

校验规则

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

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

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

用法

典型表单
<View title="新增人员" version="2">
  <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="#{() =>'确认提交'}" logicFlow="trantor_doc_Person_create" />
    </Actions>
  </Form>
</View>

注意：当前例子为0.17.x 版本

关联表单

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

<View title="编辑公司" version="2">
  <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" logicFlow="trantor_doc_Department_create" />
      <Action label="修改" show="#{!!this.data.id}" type="Submit" logicFlow="trantor_doc_Department_update" />
    </Actions>
  </Form>
  <Form model="trantor_doc_Company" show="#{isShow}" lookupFrom="department.company">
    <Fields>
      <Field readonly="#{ture}" 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>

注意：当前例子为0.17.x 版本

字段校验
<View title="校验" version="2">
  <Form title="必填" model="trantor_doc_Person" >
    <Fields>
      <Field name="name">
        <Validations>
          <Validation required="#{true}" 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>

注意：当前例子为0.17.x 版本

MultiField

API

参数说明类型默认值
label字段显示标题string
fieldTemplateMultiField 多字段排列描述，占位符使用@{}来表示string
combiner多字段显示使用的合并器string | ((fieldArray?: any[], fieldMap?: { [key: string]: any }) => any[])

用法

<View title="字段多选" version="2">
  <Form model="trantor_doc_Person">
    <Fields>
      <MultiField label='时间区间' >
        <Field name="createdAt"/>
        <Field name="createdAt"/>
      </MultiField>


      <!-- combiner -->
      <GroupField>
        <MultiField label='时间区间1' combiner="#{(field1, field2) => [field1, field2]}">
          <Field name="createdAt" label='开启'/>
          <Field name="createdAt"/>
        </MultiField>
      </GroupField>


      <!-- fieldTemplate -->
      <MultiField fieldTemplate="开始于@{fulfilmentOrderCode}结束于@{relationFulfilmentOrder.fulfilmentOrderCode}">
        <Field name="fulfilmentOrderCode"/>
        <Field name="relationFulfilmentOrder.fulfilmentOrderCode" label="relation fulfilment order code"/>
      </MultiField>
    </Fields>
  </Form>
</View>

注意：当前例子为0.17.x 版本

表单场景及操作视屏入门教学