form 表单使用说明

未匹配的标注

Form 各项说明

基本form方法如下:

  ...
  public function form(): Form
  {
          return $this->baseForm()->body([
              TextControl::make()->name('name')->label('姓名'),
              ...
          ]);
  }
  ...
  • 调试 链式调用 debug(true) 方法

  • 默认值 使用data方法,存入对映数组

     form 方法中
     $this->baseForm()->debug(true)
     ->data(
            ['price'=>0,'amount'=>0,'re_status'=>'normal','state'=>'wait']
     )->body([
          //表单项
     ])
     ...

    表单项支持的通用方法

    • id() 组件唯一id
    • name 字段名
    • label 显示
    • value 默认值 不支持变量
    • readonly
    • static 是否静态显示
    • remark 显示小图标,鼠标移上去有提示

      表单验证

    • 必填项在body子项中使用 required(true)
    function form(){
        ...
        ->body([
        ...
        TextControl::make()->name('price')->label('单价')->required(true),
        ...
       ]);
    }
    • 正则校验及错误提示

      TextControl::make()->name('phone')->label('手机号')
          ->validations('matchRegexp:/^1\d{10}/')
          ->validationErrors(['matchRegexp'=>'必需是手机号']),

字段支持组件有如下几种:

  • TextControl

  • NumberControl

  • ImageControl

  • TagControl 使用 options(选项数组) 配置选项

  • SelectControl 使用 options(选项数组) 配置选项

    • labelField: 数据源中展示label的字段名称
    • valueField: 数据源中当作value的字段名称
  • RadioControl 使用 options(选项数组) 配置选项

    $states=['wait'=>'等待','success'=>'成功','error'=>'错误'];
    $this->form()->body([
        RadiosControl::make()->name('state')->label('订单状态')->options($states),
        SelectControl::make()->name('project_id')->label('项目ID')
                    ->labelField('title')->valueField('id')
                    ->options(Model::query()->get(['id','title'])),
    ]);
  • 。。。

    下拉选择框增加更多字段信息

    获取示例数据如下

    $options=[
    ['title'=>'产品名称','id'=>'2','desc'=>'这是介绍','created_at'=>'2023-6-9 12:49:53'],
    ['title'=>'产品名称','id'=>'2','desc'=>'这是介绍','created_at'=>'2023-6-9 12:49:53'],
    ];//options的配置
    //form表单中俄使用
    amisMake()->Form()->body([
    //因为 options 不是默认的label value格式需要配制
      amisMake()->SelectControl($name, $label)->options($options)
    ->valueField('id')
    ->labelField('title'),
    //表格显示多信息
      amisMake()->SelectControl($name, $label)->options($options)
    ->valueField('id')
    //使用table展示选项信息,列配置columns
     ->selectMode('table')->columns([['name' => 'title', 'label' => '产品'], ['label' => '创建时间', 'name' => 'created_at']]),
    //tpl展示更多信息
     //->menuTpl('<div>${label} - ${created_at} 介绍:${desc}  </div>')
    ]);

    也可以借用 picker 实现弹出curd表格选择。这个参考 amis表格内容

欢迎大家的补充和指正,谢谢

官方资源

owl admin 文档
demo地址
amis所有组件示例

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
发起讨论 只看当前版本


暂无话题~