ฉันสามารถเพิ่มองค์ประกอบในวิดเจ็ตฟิลด์ด้วย AJAX ได้หรือไม่

ฉันต้องการเพิ่มฟิลด์โดยขึ้นอยู่กับตัวเลือกแรกที่เลือก ฉันยังสร้างแบบฟอร์มที่มีพฤติกรรมคล้ายกัน แต่ไม่ใช่วิดเจ็ตฟิลด์

ฉันใช้โมดูลนี้เป็นตัวอย่างในการสร้างแบบฟอร์ม

ฉันไม่แน่ใจว่าวิธีที่ฉันใช้พฤติกรรม AJAX นี้ควรจะแตกต่างออกไปในวิดเจ็ตหรือไม่

ลักษณะการทำงานของแบบฟอร์มนี้สามารถนำไปใช้ในวิดเจ็ตฟิลด์ได้หรือไม่ ฉันพยายามค้นหาตัวอย่างวิดเจ็ตฟิลด์เฉพาะที่ใช้สิ่งนี้ แต่ฉันยังไม่พบสิ่งใดที่สามารถช่วยได้ `

 ฟังก์ชันสาธารณะ formElement (FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $value = isset($items[$delta]->value) ? $items[$delta]->value : '';
    $องค์ประกอบ = [];

    // รวบรวมจำนวนรายชื่อในแบบฟอร์มเรียบร้อยแล้ว
    $num_names = $form_state->get('num_names');
    // เราต้องแน่ใจว่ามีช่องชื่ออย่างน้อยหนึ่งช่อง
    ถ้า ($num_names === NULL) {
        $name_field = $form_state->set('num_names', 1);
        $num_names = 1;
    } 

    $องค์ประกอบ['จุดพัก'] = [
      '#type' => 'เลือก',
      '#title' => $this->t('กลุ่มเบรกพอยต์'),
      '#options' => $this->getBreakpointsGroups(),
      '#default_value' => $value,
      '#empty_option' => $this->t('-เลือกกลุ่มเบรกพอยต์-'),
    ];   



    $องค์ประกอบ['images_fieldset'] = [
        '#type' => 'ชุดฟิลด์',
        '#title' => $this->t('โหลดรูปภาพสำหรับแต่ละเบรกพอยต์'),
        '#prefix' => '<div id="breakpoint-wrapper">',
        '#suffix' => '</div>',
    ];

    สำหรับ ($i = 0; $i < $num_names; $i++) {
        $element['images_fieldset']['image'][$i] = [
            '#type' => 'รูปภาพ',
            '#title' => $this->t('รูปภาพ'),
            '#name' => "ชื่อ"
        ];
    }

    $element['images_fieldset']['ส่ง'] = [
        '#type' => 'ส่ง',
        '#title' => 'ส่ง',
        '#submit' => ['::submitForm'],
        '#value' => $this->t("ส่ง"),
        '#อาแจ็กซ์' => [
            'callback' => '::loadImageFields',
            'wrapper' => 'breakpoint-wrapper',
        ],
    ];


    ส่งคืน ['ค่า' => $องค์ประกอบ];
}

/**
 * ส่งกลับรายการเบรกพอยต์
 *
 * @return อาร์เรย์
 * อาร์เรย์ที่เชื่อมโยงของเบรกพอยต์ เหมาะที่จะใช้เป็นแบบฟอร์ม
 *   ตัวเลือก.
 */
ฟังก์ชันที่ได้รับการป้องกัน getBreakpointsGroups () {
    $breakpoints = \Drupal::service('breakpoint.manager')->getGroups();
    $breakpoint_names = array_keys($เบรกพอยต์);
    $breakpoint_group = อาร์เรย์();
    foreach ($breakpoint_names เป็น $name) {
        $breakpoint_group += [$ชื่อ => $ชื่อ];
    }
    ส่งคืน $breakpoint_group;
}

ฟังก์ชันที่มีการป้องกัน submitForm ($form, &$form_state) {
    $state = $form_state->getTriggeringElement();
    $breakpoint= $state['#value'];
    $array = อาร์เรย์ ();

    $breakpoint = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup($breakpoint);
    $breakpoints_name = array_keys($เบรกพอยต์);

    foreach ($breakpoints_name เป็น $breakpoint_definition) {
        $mediaQuery = $breakpoint[$breakpoint_definition]->getMediaQuery();
        array_push($อาร์เรย์,$mediaQuery);
    }      

    $name_field = $form_state->get('num_names');
    $form_state->set('num_names',count($array));

    $form_state->setRebuild();

}

ฟังก์ชันสาธารณะ loadImageFields (อาร์เรย์ $form, FormStateInterface $form_state) {
    ส่งคืน $form['images_fieldset'];
 }

}

ประเด็นคือ คุณไม่สามารถแก้ไขโครงสร้างแบบฟอร์มภายในของ Drupal ในการเรียกกลับ Ajax ดังนั้นคุณจะต้องมีตัวจัดการการส่ง สำหรับฟิลด์หรือสำหรับวิดเจ็ตทั้งหมด ทำการแก้ไขแบบฟอร์มที่นั่น และเพิ่ม $form_state->setRebuild()

การเรียกกลับของ Ajax โดยพื้นฐานแล้วจะปรับเปลี่ยน HTML ในเบราว์เซอร์ นั่นคือทั้งหมดที่พวกเขาทำ พวกเขาจะถูกเรียกหลังจากการตรวจสอบและการส่งได้ทำงาน