ฉันจะแสดงวิทยุแบบไดนามิก (AJAX) ในรูปแบบ API ได้อย่างไร

แบบฟอร์มดังต่อไปนี้คาดว่าจะแสดงฟิลด์เพิ่มเติมเมื่อผู้ใช้เลือก "ใช่" ในปุ่มตัวเลือก "แสดงเพิ่มเติม" เมื่อแสดง ส่วนเพิ่มเติมจะมีช่องข้อความ "ชื่อ" และชุดตัวเลือก "เพศ"

แต่มันไม่เคยทำงานตามที่คาดไว้ ป้ายกำกับ "เพศ" จะอยู่ที่นั่น แต่ปุ่มตัวเลือกจะไม่แสดงผล ฉันรู้ว่าการเปลี่ยน "เพศ" เป็นวิทยุจะได้ผล แต่ด้วยเหตุผลบางอย่าง ฉันจำเป็นต้องใช้ปุ่มตัวเลือกหลายปุ่ม มีวิธีใดบ้างที่ฉันจะทำให้งานนี้สำเร็จ

<?php

เนมสเปซ Drupal\mymodule\Form;

ใช้ Drupal\Core\Form\FormBase;

คลาส DonationPrepareForm ขยาย FormBase {

  /**
   * {@inheritdoc}
   */
  ฟังก์ชั่นสาธารณะ getFormId () {
    กลับ 'my_form';
  }

  /**
   * {@inheritdoc}
   */
  buildForm ฟังก์ชั่นสาธารณะ (
    อาร์เรย์ $form,
    FormStateInterface $form_state
  ) {
    $แบบฟอร์ม['show_more'] = [
      '#type' => 'วิทยุ',
      '#title' => 'แสดงเพิ่มเติม',
      '#ตัวเลือก' => [
        'ใช่' => 'ใช่',
        'น' => 'ไม่',
      ]
      '#อาแจ็กซ์' => [
        'callback' => '::ajaxBuildForm',
        'wrapper' => 'แก้ไขเพิ่มเติม-wrapper',
        'ความคืบหน้า' => [
          'type' => 'throbber',
          'ข้อความ' => $this->t('กำลังโหลด...'),
        ]
      ]
    ];
    $แบบฟอร์ม['เพิ่มเติม'] = [
      '#type' => 'คอนเทนเนอร์',
      '#prefix' => '<div id="edit-more-wrapper">',
      '#suffix' => '</div>',
    ];

    คืนฟอร์ม $;
  }

  ฟังก์ชันสาธารณะ ajaxBuildForm (อาร์เรย์ &$form, FormStateInterface $form_state)
  {
    ถ้า ($form_state->getValue('show_more') === 'Y') {
      $form['เพิ่มเติม']['ชื่อ'] = [
        '#type' => 'ช่องข้อความ',
        '#title' => 'ชื่อ',
        '#required' => จริง,
      ];
      $form['more']['gender'] = [
        '#type' => 'วิทยุ',
        '#title' => 'เพศ',
        '#ตัวเลือก' => [
          'M' => 'ชาย',
          'F' => 'หญิง',
        ]
        '#required' => จริง,
      ];
    }
    ส่งคืน $form['more'];
  }
}

คำถามเดียวกันขยายไปถึงองค์ประกอบฟอร์มผสมอื่นๆ (เช่นช่องทำเครื่องหมาย) มีวิธีใดบ้างที่จะทำให้ AJAX ใช้งานได้?

จริงๆแล้วมันง่ายกว่ามากที่จะใช้ form element #states property เพื่อทำให้ element มองเห็น , มองไม่เห็น , เปิดใช้งาน , ปิดการใช้งาน , จำเป็น หรือ ... แทนที่จะใช้ ajax

รหัสเช่นนี้จะทำงาน:

<?php

เนมสเปซ Drupal\mymodule\Form;

ใช้ Drupal\Core\Form\FormBase;

คลาส DonationPrepareForm ขยาย FormBase {

  /**
   * {@inheritdoc}
   */
  ฟังก์ชั่นสาธารณะ getFormId () {
    กลับ 'my_form';
  }

  /**
   * {@inheritdoc}
   */
  buildForm ฟังก์ชั่นสาธารณะ (
    อาร์เรย์ $form,
    FormStateInterface $form_state
  ) {
    $แบบฟอร์ม['show_more'] = [
      '#type' => 'วิทยุ',
      '#title' => 'แสดงเพิ่มเติม',
      '#ตัวเลือก' => [
        'ใช่' => 'ใช่',
        'น' => 'ไม่',
      ]
    ];


    $form['เพิ่มเติม']['ชื่อ'] = [
      '#type' => 'ช่องข้อความ',
      '#title' => 'ชื่อ',
      '#states' => อาร์เรย์(
        'มองเห็นได้' => อาร์เรย์(
          ':input[name="show_more"]' => array('value' => 'Y'),
        ),
        'จำเป็น' => อาร์เรย์ (
          ':input[name="show_more"]' => array('value' => 'Y'),
        )
      ),
    ];
    $form['more']['gender'] = [
      '#type' => 'วิทยุ',
      '#title' => 'เพศ',
      '#ตัวเลือก' => [
        'M' => 'ชาย',
        'F' => 'หญิง',
      ]
      '#states' => อาร์เรย์(
        'มองเห็นได้' => อาร์เรย์(
          ':input[name="show_more"]' => array('value' => 'Y'),
        ),
        'จำเป็น' => อาร์เรย์ (
          ':input[name="show_more"]' => array('value' => 'Y'),
        )
      ),
    ];

    คืนฟอร์ม $;
  }

}