# 表单视图
### 表单视图
对于您的表单支持“[创建”](https://octobercms.com/docs/backend/forms#form-create-page)，“[更新”](https://octobercms.com/docs/backend/forms#form-update-page)和“[预览”的](https://octobercms.com/docs/backend/forms#form-preview-page)每个页面，应提供一个具有相应名称的[视图文件](https://octobercms.com/docs/backend/forms#introduction)**\-create.htm**，**update.htm**和**Preview.htm**。
表单行为向控制器类添加了两个方法：`formRender`和`formRenderPreview`。这些方法呈现使用上述YAML文件配置的表单控件。
### [](https://octobercms.com/docs/backend/forms#form-create-view)建立检视
该**create.htm**观点代表了创建页面，允许用户创建新的记录。典型的“创建”页面包含面包屑，表单本身和表单按钮。该**数据请求**属性应该指的是`onSave`由表单行为提供AJAX处理程序。下面是典型的create.htm表单的内容。
~~~
<?= Form::open(['class'=>'layout']) ?>
<div class="layout-row">
<?= $this->formRender() ?>
</div>
<div class="form-buttons">
<div class="loading-indicator-container">
<button
type="button"
data-request="onSave"
data-request-data="close:true"
data-hotkey="ctrl+enter, cmd+enter"
data-load-indicator="Creating Category..."
class="btn btn-default">
Create and Close
</button>
<span class="btn-text">
or <a href="<?= Backend::url('acme/blog/categories') ?>">Cancel</a>
</span>
</div>
</div>
<?= Form::close() ?>
~~~
### [](https://octobercms.com/docs/backend/forms#form-update-view)更新视图
该**update.htm**观点代表了更新页面，允许用户更新或删除现有记录。典型的“更新”页面包含面包屑，表单本身和表单按钮。“更新”页面与“创建”页面非常相似，但通常具有“删除”按钮。该**数据请求**属性应该指的是`onSave`由表单行为提供AJAX处理程序。以下是典型的update.htm表单的内容。
~~~
<?= Form::open(['class'=>'layout']) ?>
<div class="layout-row">
<?= $this->formRender() ?>
</div>
<div class="form-buttons">
<div class="loading-indicator-container">
<button
type="button"
data-request="onSave"
data-request-data="close:true"
data-hotkey="ctrl+enter, cmd+enter"
data-load-indicator="Saving Category..."
class="btn btn-default">
Save and Close
</button>
<button
type="button"
class="oc-icon-trash-o btn-icon danger pull-right"
data-request="onDelete"
data-load-indicator="Deleting Category..."
data-request-confirm="Do you really want to delete this category?">
</button>
<span class="btn-text">
or <a href="<?= Backend::url('acme/blog/categories') ?>">Cancel</a>
</span>
</div>
</div>
<?= Form::close() ?>
~~~
### [](https://octobercms.com/docs/backend/forms#form-preview-view)预览视图
该**preview.htm**视图表示预览页面，允许用户在只读模式预览现有记录。典型的“预览”页面包含面包屑和表单本身。下面是典型的Preview.htm表单的内容。
~~~
<div class="form-preview">
<?= $this->formRenderPreview() ?>
</div>
~~~
### [](https://octobercms.com/docs/backend/forms#field-conditions)将条件应用于字段
有时，您可能希望在某些条件下操纵表单字段的值或外观，例如，如果勾选了复选框，则可能希望隐藏输入。您可以通过触发器API或字段依赖项来执行此操作。输入预设转换器主要用于转换字段值。这些选项将在下面更详细地描述。
### [](https://octobercms.com/docs/backend/forms#field-input-preset)输入预设转换器
输入预设转换器是使用“`preset`[表单字段”选项](https://octobercms.com/docs/backend/forms#form-field-options)定义的，它允许您将输入到元素中的文本转换为另一个输入元素中的URL，段或文件名值。
在此示例中，`url`当用户在`title`字段中输入文本时，我们将自动填写字段值。如果在“标题”中键入文本**Hello world**，则URL会跟着\*\*/ hello-world\*\*的转换值。仅当目标字段（`url`）为空且未更改时，才会发生此行为。
~~~
title:
label: Title
url:
label: URL
preset:
field: title
type: url
~~~
或者，该`preset`值也可以是仅引用该**字段**的字符串，`type`然后该选项将默认为**slug**。
~~~
slug:
label: Slug
preset: title
~~~
以下选项可用于该`preset`选项：
| 选项 | 描述 |
| --- | --- |
| **field** | 定义另一个字段名称来作为值的来源。 |
| **type** | 指定转换类型。请参阅下面的支持值。 |
| **prefixInput** | 可选，使用CSS选择器在转换后的值之前提供在提供的输入元素中找到的值。 |
以下是受支持的类型：
| 类型 | 描述 |
| --- | --- |
| **exact** | 复制准确值 |
| **slug** | 将复制的值格式化为段 |
| **url** | 与子弹相同，但以/开头 |
| **camel** | 使用camelCase格式化复制的值 |
| **file** | 将复制的值格式化为文件名，并用短划线代替空格 |
### [](https://octobercms.com/docs/backend/forms#field-trigger-events)触发事件
触发事件是使用`trigger`[form field选项](https://octobercms.com/docs/backend/forms#form-field-options)定义的，是使用JavaScript的基于浏览器的简单解决方案。它允许您基于其他元素的状态来更改元素属性，例如可见性或值。这是一个示例定义：
~~~
is_delayed:
label: Send later
comment: Place a tick in this box if you want to send this message at a later time.
type: checkbox
send_at:
label: Send date
type: datepicker
cssClass: field-indent
trigger:
action: show
field: is_delayed
condition: checked
~~~
在上面的示例中，`send_at`仅在`is_delayed`选中表单字段时才会显示该表单字段。换句话说，如果选中了其他表单输入（字段）（条件），则该字段将显示（操作）。该`trigger`定义指定了以下选项：
| 选项 | 描述 |
| --- | --- |
| **action** | 定义满足条件时应用于此字段的操作。支持的值：显示，隐藏，启用，禁用，为空。 |
| **field** | 定义将触发操作的另一个字段名称。通常，字段名称是指相同级别形式的字段。例如，如果此字段在[转发器小部件中](https://octobercms.com/docs/backend/forms#widget-repeater)，则仅选中同一[转发器小部件中的](https://octobercms.com/docs/backend/forms#widget-repeater)字段。但是，如果字段名称前面有一个插入符号，`^`例如：`^parent_field`，它将引用一个[转发器小部件](https://octobercms.com/docs/backend/forms#widget-repeater)或形成比该字段本身高一级的格式。此外，如果超过一个插入符号`^`时，它会参考很多水平高：`^^grand_parent_field`，`^^^grand_grand_parent_field`，等。 |
| **condition** | 确定指定字段应满足的条件，以将条件视为“ true”。支持的值：选中，未选中，value \[somevalue\]。 |
### [](https://octobercms.com/docs/backend/forms#field-dependencies)字段依赖
表单字段可以通过定义`dependsOn`[表单字段选项](https://octobercms.com/docs/backend/forms#form-field-options)来声明对其他字段的依赖关系，该[选项](https://octobercms.com/docs/backend/forms#form-field-options)提供了更健壮的服务器端解决方案，用于在修改依赖关系时更新字段。当声明为依赖项的字段发生更改时，定义字段将使用AJAX框架进行更新。这提供了使用`filterFields`方法或更改要提供给该字段的可用选项与该字段的属性进行交互的机会。下面的例子：
~~~
country:
label: Country
type: dropdown
state:
label: State
type: dropdown
dependsOn: country
~~~
在上面的示例中，当`state`表单字段的`country`值更改时，表单字段将刷新。发生这种情况时，当前表单数据将被填充到模型中，以便下拉选项可以使用它。
~~~
public function getCountryOptions()
{
return ['au' => 'Australia', 'ca' => 'Canada'];
}
public function getStateOptions()
{
if ($this->country == 'au') {
return ['act' => 'Capital Territory', 'qld' => 'Queensland', ...];
}
elseif ($this->country == 'ca') {
return ['bc' => 'British Columbia', 'on' => 'Ontario', ...];
}
}
~~~
该示例对于处理模型值很有用，但无权访问表单字段定义。您可以通过定义`filterFields`模型内的方法来[过滤表单字段](https://octobercms.com/docs/backend/forms#filter-form-fields)，如[过滤表单字段](https://octobercms.com/docs/backend/forms#filter-form-fields)部分所述。下面提供了一个示例：
~~~
dnsprovider:
label: DNS Provider
type: dropdown
registrar:
label: Registrar
type: dropdown
specificfields[for][provider1]:
label: Provider 1 ID
type: text
hidden: true
dependsOn:
- dnsprovider
- registrar
specificfields[for][provider2]:
label: Provider 2 ID
type: text
hidden: true
dependsOn:
- dnsprovider
- registrar
~~~
filterFields方法的逻辑如下：
~~~
public function filterFields($fields, $context = null)
{
$displayedVendors = strtolower($this->dnsprovider->name . $this->registrar->name);
if (str_contains($displayedVendors, 'provider1')) {
$fields->{'specificfields[for][provider1]'}->hidden = false;
}
if (str_contains($displayedVendors, 'provider2')) {
$fields->{'specificfields[for][provider2]'}->hidden = false;
}
}
~~~
在上面的示例中，只要修改了或字段，则`provider1`和`provider2`字段都会自动刷新。发生这种情况时，将处理整个表单周期，这意味着将再次运行方法中定义的任何逻辑，从而使您可以筛选动态显示哪些字段。`dnsprovider``registrar``filterFields`
### [](https://octobercms.com/docs/backend/forms#prevent-field-submission)阻止提交字段
有时您可能需要阻止提交字段。为此，只需在表单配置文件中的字段名称之前添加下划线（\_）。以下划线开头的表单域将自动清除，不再保存到模型中。
~~~
address:
label: Title
type: text
_map:
label: Point your address on the map
type: mapviewer
~~~
- 基本说明
- 基本操作
- October cms 安装
- 后台控制器路径
- 图标
- 获取安装网上的插件/主题
- 插件构造器使用
- 定时任务
- October后台控制器
- vscode编辑器
- ajax操作
- 使用
- ajax更新组件
- ajax属性API
- JavaScript API
- ajax综合使用
- 主题
- 多语言主题
- 安装市场主题
- 主题程序处理
- 主题
- 页面
- 部件
- 布局
- 内容
- 组件
- 媒体
- 主题表单操作
- 表单使用
- 表单后端程序处理
- 插件
- 自定义插件
- 插件说明
- 插件导航条
- 插件数据库设置
- 插件的设置管理
- 插件的配置文件config
- 组件
- app服务
- app容器
- 扩展行为
- 缓存
- Collection类
- Lazy Collections
- Collection方法
- 助手函数
- 数组助手函数
- 路径助手函数
- 玄乐助手函数
- 其他助手函数
- 错误与记录
- 事件处理
- HTML页面
- 文件与目录操作
- 散列和加密
- 邮件
- 邮件内容
- 邮件发送
- 分页
- 模板解析器
- 动态解析器语法
- 队列消息
- 请求与输入
- 响应
- 视图
- 路由器
- 配置
- 验证操作
- 处理错误消息
- 错误消息与视图
- 可用的验证规则
- 有条件的验证规则
- 验证数组
- 错误消息
- 自定义验证规则
- 模型操作
- 定义模型与其属性
- 检索模型
- 插入与更新
- 删除模型
- 查询范围
- 事件操作
- 关联操作
- 定义关系
- 关系类型
- 多肽关系
- 关系查询
- 渴望加载
- 插入模型
- 数据库操作
- 基本用法
- 数据表结构
- 查询连贯操作
- 结果检索
- select子句
- 插入更新
- where子句
- 排序，分组，限制和偏移
- 文件附件
- Collection操作
- 属性操作
- 系列化json
- 数据库属性
- 数据库行为
- 控制器
- 后台控制器定义
- 后台页面
- 后台组件
- 后台表单
- 表单组件
- 表单视图
- 表单行为
- 后台列表
- 列表行为
- 列表过滤器
- 可用列类型
- 关系行为
- 关系行为类型
- 扩展关系行为
- 列表排序操作
- 导入导出操作
- 用于与权限
- corlate模板修改
- 修改顶部导航
- laravel问题
- 控制器不存在
- 控制器
- 路由组
- laravel笔记
- laravel 安装
- 伪静态配置
- 依赖注入 & 控制器
- 中间件
- 路由文件
- 视图