表單視圖 · October Cms 筆記

# 表單視圖 ### 表單視圖對于您的表單支持“[創建”](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 ~~~