由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

使用示例

  1. $form = new Form(new User());
  3. $form->item('username', '用户名')->component(Input::make()->prefixIcon('el-icon-eleme'));
  4. $form->item('status', '状态')->component(Slider::make(15));
  6. return $form;

行内模式

$form->inline();

域标签位置

如果值为 left 或者 right 时，则需要设置 label-width

$form->labelPosition("right");

标签宽度

例如 ‘50px’。作为 Form 直接子元素的 form-item 会继承该值。支持 auto

$form->labelWidth("150px");

标签后缀

$form->labelWidth(":");

红色星号

是否显示必填字段的标签旁边的红色星号

$form->hideRequiredAsterisk(false);

显示错误信息

是否显示校验错误信息

$form->showMessage(false);

行内展示信息

行内形式展示校验信息

$form->inlineMessage(true);

反馈图标

是否在输入框中显示校验结果反馈图标

$form->statusIcon(true);

触发验证

是否在 rules 属性改变后立即触发一次验证

$form->validateOnRuleChange(true);

组件尺寸

$form->size("small");

禁用

是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效

$form->disabled(true);

弹窗模式

在Grid中使用

//注意注意注意，在Grid中调用
$grid->dialogForm($this->form()->isDialog());

创建按钮名称

 $form->createButtonName("创建");

更新按钮名称

 $form->updateButtonName("更新");

取消/返回按钮名称

 $form->backButtonName("取消");

按钮宽度

$form->buttonWidth("200px");

全局验证规则

会和字段验证规则组合在一起，常用于数组验证

$form->addValidatorRule([
    'goods_sku.goods_sku_list.*.price' => ["numeric", "min:0.01"]
], [
    'goods_sku.goods_sku_list.*.price.min' => '价格最小为0.01'
]);

头部、底部布局

image.png

 $form->top(function (Content $content) {
    $content->row(...)->className('mb-10');
});

 $form->bottom(function (Content $content) {
    $content->row(...)->className('mb-10');
});

非模型绑定模式

此模式可以脱离Model，灵活使用表单，但是需要自己实现数据的处理

$form = new Form();

自定义动作按钮

 $form->actions(function (Form\FormActions $formActions){
    //隐藏取消按钮
  $formActions->hideCancelButton();
    //设置提交按钮
  $formActions->submitButton()->content("提交表单")->style("width:200px");
    //底部固定
  $formActions->fixed();
    //添加左边自定义
    $formActions->addLeft();
    //添加右边自定义
  $formActions->addRight();
    //获取Form对象
    $formActions->getForm();
});

ref

设置表单的ref名称,设置后其他组件可用refData类型的方法注入VUE逻辑代码

$form->ref('demoForm');

提交地址

$form->action("");

编辑数据源

当表单是编辑模式下回请求这个地址获取编辑数据

$form->dataUrl("");

编辑模式

$form->edit();

获取数据模式

如果当前url中有getData参数form组件会以获取数据模式返回，此方法可强制字段form返回数据模式

$form->isGetData(false);
$form->isGetData(true);

提交成功RefData

表单提交成功默认会返回上一级路由，弹窗模式会自动关闭弹窗。
普通模式提供了代码注入功能

//设置Form的ref
$form->ref('demoForm');

$form->successRefData('demoForm','js......');
//代码示例
$form->successRefData("demoForm",function (){
            return <<<JS
self.\$message.info("表单提交成功代码注入");
JS;
});

JS代码提供的对象：

  • self为当前表单组件this
  • ref为注入目标组件this

默认建议ref指定为当前表单的ref名称，如果需要注入其他组件可以设定其他值