Symfony自定义字段还是动态表单? [英] Symfony Custom Field or Dynamic Form?

问题描述

我要您提供一些关于在Symfony 3中创建特定表格的建议.

I'm asking you for a litte advice in creating specific form in Symfony 3.

在阅读Symfony Docs之后，我想到了一些解决方案，但我要求您分享实现这一目标的最佳方法.

After reading Symfony Docs I have some solution in mind, but I'm asking you for sharing best aproach to achieve this.

我需要这样的输出形式:链接以获取预期的示例形式

I need to get output form like this: link for expected example form

如您所见，我需要对一个复选框和一种输入类型进行单一字段构造.就像用户勾选复选框一样，输入将处于活动状态.

As you see i need to make single field constiting of one checkbox and one input type. It should work like if user ticks the checkbox, the input will be active.

它应该是FormType的getParent()方法作为父项的自定义字段吗?也许应该使用事件侦听器和一些Javascript动态创建此表单?还是应该是CollectionType字段(但是它如何存储两种不同的表单字段类型?)或者您可能知道不同的解决方案?

Should it be custom field with getParent() method from FormType as parent? Maybe this form should be created dynamically with event listener and some Javascript? Or it should be CollectionType field (but how it can store two different form field types?) or maybe you know different solution?

基本上，一个字段应该由彼此不同的两个不同的字段类型组成.

Basically one field should consist of two different field type depending from each other.

非常欢迎您提供帮助，分享知识或一些代码示例.

Any help, sharing knowledge or some code examples will be very welcome.

推荐答案

首先，您必须构建一个包含CheckboxType和TextType的自定义FormType.这是服务器端表单的一部分.

First, you have to build a custom FormType that composes a CheckboxType and a TextType. This is the server-side form part.

但是，为了即时启用/禁用文本字段，您必须使用Javascript.

But, in order to enable/disable the text field on the fly, you'll have to use Javascript.

最后，如果要将结果信息存储在单个可为空的文本字段(如可为空的varchar)中，则需要一个DataTransformer来将数据从持久层转换为视图.

Finally, if you want to store the result information a single nullable text field (like a nullable varchar), you need a DataTransformer to convert data from persistece layer to view.

让我们看看一种FormType:

Let's see a kind of FormType :

<?php

namespace Form\Type;

use Form\DataTransformer\NullableTextTransformer;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;

class NullableTextType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('isNotNull', CheckboxType::class)
            ->add('text', TextType::class, array('required' => false))
        ;

        $builder->addModelTransformer(new NullableTextTransformer());
    }
}

现在是变压器:

<?php

namespace Form\DataTransformer;

use Symfony\Component\Form\DataTransformerInterface;

class NullableTextTransformer implements DataTransformerInterface
{
    public function transform($value)
    {
        $nullableText = ['isNotNull' => false, 'text' => null];

        if (null !== $value) {
            $nullableText['isNotNull'] = true;
            $nullableText['text'] = (string) $value;
        }

        return $nullableText;
    }

    public function reverseTransform($array)
    {
        if (!is_array($array) || empty($array) || !isset($array['isNotNull']) || !isset($array['text'])) {
            return;
        }

        if ($array['isNotNull']) {
            return (string) $array['text'];
        } else {
            return;
        }
    }
}

一些树枝用于自定义字段的表单主题设置:

Some twig for the form theming of the custom field :

{% block nullable_text_widget %}
{% spaceless %}
  <div class="input-group nullable-text-widget">
    <div class="input-group-addon">
      {{ form_widget(form.isNotNull, {attr: {class: 'is-not-null-widget'}}) }}
    </div>
    {{ form_widget(form.text, {attr: {class: 'text-widget'}}) }}
  </div>
{% endspaceless %}
{% endblock nullable_text_widget %}

最后，有一堆JS行来处理前端交互:

And finally, a bunch of JS lines to handle the front interactions :

$(document).ready(function() {
    $.each($('body').find('.nullable-text-widget'), function () {
        syncNullableTextWidget($(this));
    });
});

$(document).on('click', '.nullable-text-widget .is-not-null-widget', function (e) {
    var $nullableTextWidget = $(e.currentTarget).parents('.nullable-text-widget');
    syncNullableTextWidget($nullableTextWidget);
});

function syncNullableTextWidget($widget)
{
    if ($widget.find('.is-not-null-widget').prop('checked')) {
        $widget.find('.text-widget').prop('disabled', false);
    } else {
        $widget.find('.text-widget').prop('disabled', true);
        $widget.find('.text-widget').val('');
    }
}

这篇关于Symfony自定义字段还是动态表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！