Как отобразить значения choiceType в Symfony как цвета

Question

Я хочу сохранить целое значение в базе данных и отобразить его в виде цвета, но я не нахожу правильный способ сделать это.

Моя форма выглядит так:

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder->add('risk', ChoiceType::class, [
        'choices' => 
            'level.0' => 1,
            'level.1' => 2,
            'level.2' => 3,
            'level.3' => 4,
            'level.4' => 5
        ],
    ]);
}

В конце она должна выглядеть так:

Answer 1

Вы можете использовать choice_attr , чтобы добавить определенный класс CSS к этим вариантам, и соответствующие определения классов в вашем CSS, чтобы отобразить эти варианты, как вам нравится:

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder->add('risk', ChoiceType::class, [
        'choices' => 
            'level.0' => 1,
            'level.1' => 2,
            'level.2' => 3,
            'level.3' => 4,
            'level.4' => 5
        ],
        'choice_attr' => function($choice, $key, $value) {
           return ['class' => 'level_'.strtolower($key)];
        }
    ]);
}

CSS: (только цвет текста в качестве примера, остальное зависит от вас)

.level_0 {
    color: red;
}
.level_1 {
    color: orange;
}
.level_2 {
    color: yellow;
}
.level_3 {
    color: light_green;
}
.level_4 {
    color: green;
}

Answer 2

Прежде всего, спасибо за Veve, но его Ответ был очень коротким и не завершенным, я получил возможность преобразовать тип выбора в переключатели, добавив расширенные => true и множественные => false. Для получения дополнительной информации см .: Symfony Select Tag

$builder->add('risk', ChoiceType::class, [
     'choices' => [
        'level-0' => 1,
        'level-1' => 2,
        'level-2' => 3,
        'level-3' => 4,
        'level-4' => 5
     ],
        'choice_attr' => function($choice, $key, $value) {
             return ['class' => 'risk_'.strtolower($key)];
         },
     'expanded' => true,
     'multiple' => false,
     'placeholder' => false
]);

Затем я использовал таблицу для отображения значений из формы.

<table class="table risk-colors-table">
    <tr>
        <td class="risk_level-text">Text</td>
        <td class="risk-option level-0">{{ form_row(form.risk[0])}}</td>
        <td class="risk-option level-1">{{ form_row(form.risk[1])}}</td>
        <td class="risk-option level-2">{{ form_row(form.risk[2])}}</td>
        <td class="risk-option level-3">{{ form_row(form.risk[3])}}</td>
        <td class="risk-option level-4">{{ form_row(form.risk[4])}}</td>
    </tr>
</table>

И я добавил этот CSSчтобы создать красивый дизайн, используя классы, которые я добавил ранее, и скрыть переключатели и метки:

.risk_level-text {
   vertical-align: center!important;
}

.level-0 {
    background: #63d06c;
}

.level-1 {
    background: #a7e35c;
}

.level-2 {
    background: #fdf74d;
}

.level-3 {
    background: #f0a725;
}

.level-4 {
    background: #ee0018;
}

.risk-colors-table {
    width: 100%;
    padding-left: 2px;
}

.risk-colors-table tr {
    border:2px solid #d9d9d9;
}

.risk-option {
    float: right;
    vertical-align: center!important;
    border-radius: 25px;
    margin-bottom: 25px;
    height: 28px;
    width:19%;
}

.risk-option label {
    visibility: hidden;
    text-align: center;
    color:white;
    vertical-align:middle;
}

.risk-option.active {
    border:3px solid #3362b1;
}

.risk-colors-table td {
    margin: 10px 1px;
}

В JavaScript мне нужно было добавить эту функцию, чтобы активировать переключатель при нажатии на таблицу. тд:

$(function () {
    $('.risk-option').click(
        function () {
            $(this).addClass('active').siblings().removeClass('active');
            var $radioBtn = $('.risk-option.active input[type="radio"]');

            if ($radioBtn.is(':checked') === true) {
                $radioBtn.filter('input[type="radio"]').prop('checked', true);
            }
        }
    );
});

Я так много работал над этим, и я надеюсь, что это может кому-то помочь. Окончательные результаты - именно то, что показано на рисунке в моем среднем вопросе.