9.8.2. Բազմաստիճան ցատկող ձև Drupal-ում

Այս հոդվածում մենք կշարունակենք ծանոթանալ Drupal 8-ի Form API-ին և կստեղծենք բազմափուլ ձև (multi-step form): Մենք արդեն ստեղծել ենք մոդուլի սովորական կարգավորումների ձևը, իսկ բազմափուլ ձևը ստեղծվում է նույնատիպ ձևով՝ օգտագործելով $form_state՝ ձևի փուլերի միջև տվյալները պահելու համար։

Կոդի օրինակները կարող եք գտնել github-ում՝

https://github.com/levmyshkin/drupalbook8

Բազմափուլ ձևի համար անհրաժեշտ է ձևի class ավելացնել՝

/modules/custom/drupalbook/src/Form/MultiStepForm.php

Այնուհետև մենք կվերլուծենք յուրաքանչյուր կոդի հատվածը։ Իսկ մինչ այդ ստեղծենք երթուղի (route) մեր ձևի համար՝
/modules/custom/drupalbook/drupalbook.routing.yml:

drupalbook.multistep_form:
  path: '/multistep-form'
  defaults:
    _form: '\Drupal\drupalbook\Form\MultiStepForm'
    _title: 'Բաժանորդագրվել նորություններին'
  requirements:
    _permission: 'access content'

Դա կստեղծի ձև /multistep-form հասցեով։

Որպեսզի այս ձևը բացվի մոդալ պատուհանում, պետք է ավելացնել block կամ պարզապես տեքստ՝ հատուկ use-ajax դասով և data-dialog-type="modal" ատրիբուտով, ձևի էջի հղումով։ Կարևոր է միացնել հետևյալ գրադարանները՝ core/drupal.dialog.ajax և core/jquery.form։

Եթե դա անում եք բլոկի միջոցով, կստանաք ձևի բացման կոճակի հետևյալ կոդը՝ modules/custom/drupalbook/src/Plugin/Block/SubscribeFormButton.php-ում։

Ձևը պոպափ պատուհանում կունենա նման տեսք՝

Ես նաև միացրել եմ custom գրադարան՝ drupalbook.libraries.yml ֆայլից՝

modules/custom/drupalbook/drupalbook.libraries.yml

multistep_form:
  css:
    css/multistep_form.css: {}
  js:
    scripts/multistep_form.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

Անհրաժեշտ է ձևի ոճավորումը և անհրաժեշտ jQuery plugin-ների միացումը։ Դրա համար պետք է ստեղծել հետևյալ ֆայլերը՝

modules/custom/drupalbook/css/multistep_form.css
modules/custom/drupalbook/scripts/multistep_form.js

Կոդի օրինակները կարող եք գտնել github-ում՝
https://github.com/levmyshkin/drupalbook8