表单元素的状态控制

表单元素的状态控制

表单元素的 状态(State)，指的是它渲染成 HTML 后，其 DOM 元素的状态属性， 比如 可见性、可用性、只读、必填、选中、输入值 等。

这些 DOM 状态，其实可以在渲染数组中随意定义并生成的， 但是有时我们需要它们可以在前端浏览器中根据用户的交互而被动态改变。 例如一个 DOM 元素的可见性取决于另一个 DOM 元素的选中值或输入值。

假设我们有如下表单： 当用户选中 指定联系时间 时，显示 联系时间 的输入框。

这种控制是纯粹属于视图层的，其实直接写 JS 和 CSS 代码去处理也是可以的。 但是由于这种情况很常见，所以 Drupal 在 FormElement 中实现了快速配置的支持， 以提高开发效率，这就是表单元素中 #states 属性的作用。

Drupal 底层是通过一个名为 core/states 的 库(Library) 去实现动态控制的。 我们不需要去知道 #states 属性的底层实现，只需要知道怎么使用该属性就可以了。

代码示例

在 example0406 模块中添加表单 src/Form/DefaultForm.php：

<?php

namespace Drupal\example0406\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;


class DefaultForm extends FormBase {

  public function getFormId() {
    return 'default_form';
  }

  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('名字')
    ];
    $form['tel'] = [
      '#type' => 'tel',
      '#title' => $this->t('电话')
    ];
    $form['show_contact_time'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('指定联系时间')
    ];
    $form['contact_time'] = [
      '#type' => 'textfield',
      '#title' => $this->t('联系时间'),
      '#states' => [
        // 可见性视乎 指定联系时间 选项的状态
        'visible' => [
          ':input[name="show_contact_time"]' => [ 'checked' => true ]
        ]
      ]
    ];

    return $form;
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    // 在此处理表单提交
  }

}

在 example0406.routing.yml 文件中为表单配置路由：