Question

在Symfony中，我有一个twig页面，显示带有文本字段和复选框的表单。表单包含问题的数据和四个可能的答案。用户可以编辑数据并选择一个正确的答案。目前，我拥有用户可以更改数据的所有文本字段和四个复选框。我没有复选框，而是需要单选按钮（这是为了让用户只选择一个选项）。此外，我需要复选框位于文本字段的右侧，以获取每个可能的答案。我怎么能在Symfony中这样做。非常感谢一些帮助。谢谢。

使用表单集合来构建整个表单

答案表格

class AnswerFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('answer');
        $builder ->add('isCorrect', null , array('label' => false,));
    }
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array('data_class' => 'QuizBundle\Entity\Answer'));
    }
    public function getName()
    {
        return 'quiz_bundle_answer_form_type';
    }
}

问题表格

class QuestionFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('image');
        $builder->add('question');
        $builder->add('answers', CollectionType::class, array('entry_type' => AnswerFormType::class));
        $builder->add('Submit', SubmitType::class, array('label' => 'Submit'));
    }
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array('data_class' => 'QuizBundle\Entity\Question'));
    }
    public function getName()
    {
        return 'quiz_bundle_question_form_type';
    }
}

这是我的Twig：

{% extends 'base.html.twig' %}
{% block body %}
    Edit record page

    {{ form_start(form) }}
    {{ form_row(form.image) }}
    {{ form_row(form.question) }}

    {% for answers in form.answers %}
        <li>{{ form_row(answers.answer) }}</li>
    {% endfor %}

    {{ form_end(form) }}

{% endblock %}

Answer 1

您不能将无线电输入与文本输入混合以让用户编辑它们。

HTML无法实现。

别无选择，你必须：

在客户端使用Javascript重新创建无线电行为
写一些CSS，使你的复选框看起来像收音机盒。
附上表单约束，该约束仅在提交后选中一个复选框。

要将文本输入放在右侧，您必须自定义表单小部件。请查看文档：{{3}}

Answer 2

由于您之前的问题，我理解您要做的事情。对于表单的布局，您可以执行以下操作以使其看起来更好：

{{ form_start(form) }}

{{ form_label(form.image) }}{{ form_widget(form.image) }}
{{ form_label(form.question) }}{{ form_widget(form.question) }}

{% for ans in form.answers %}
<li>{{ form_label(ans.answer) }}{{ form_widget(ans.answer) }}
        {{ form_label(ans.isCorrect) }}{{ form_widget(ans.isCorrect) </li>

{{ form_end(form) }}

但是，我不认为这是适合您的解决方案。像阿尔萨斯提到的那样，你需要使用Javascript检查＆＃34; onchange＆＃34;单选按钮的事件。您正在创建一个表单类，在我看来，它并不总是适用于每个设计。您可以尝试一下＆＃34; createFormBuilder＆＃34;相反，并根据您的需要进行自定义。

public function showQuestionFormAction($ansID, Request $request){

// Get Answers...
$em = $this->getDoctrine()->getManager();
$qb->select('a')
    ->from('AppBundle:Answer', 'a')
    ->where('a.answer_id = :ansID')
    ->setParameter('ansID', $ansID);
$ans = $qb->getQuery()->setMaxResults(1)->getOneOrNullResult();

$form = $this->createFormBuilder()
    ->add('image')      // Not sure what type this is???
    ->add('question', EntityType::class, array(
            'class' => 'AppBundle:Question',
            'label' => 'Question:',
            'choice_label' => 'question',   // Label shown.
            'choice_value' => 'question_id',    // What data you want returned.
            'attr' => array('class' => 'question_id'),  // For css styling only, you may not need this.
            'data' => $ques->getText(), // This is a method (getter) to get question text.
    ))
    ->add('ans1', RadioType::class, array(
            'label' => '$ans->getAnswer1()',
            'required' => false,
            'attr' => array(
                    'onchange' => "check_answer('ans1')",   // Javascript function.
                    'checked' => true,
            ),
    ))
    ->add('ans2', RadioType::class, array(
        'label' => '$ans->getAnswer2()',
        'required' => false,
        'attr' => array(
                'onchange' => "check_answer('ans2')",   // Javascript function.
                'checked' => false,
        ),
    ))
    ...

然后你就可以使用这样一个简单的javascript函数。我很快就做到了，所以可能有更好/更简单的方法来设计它。

// script/check_answer.js

function check_answer(id){
    var ans1 = document.getElementById("form_ans1");
    var ans2 = document.getElementById("form_ans2");
    var ans3 = document.getElementById("form_ans3");
    var ans4 = document.getElementById("form_ans4");

    // Check what is changed.
    if(id == 'ans1'){
        ans2.checked = false;
        ans3.checked = false;
        ans4.checked = false;
    }
    if(id == 'ans2'){
        ans1.checked = false;
        ans3.checked = false;
        ans4.checked = false;
    }
    ...
}

希望有所帮助。

Symfony形式内联无线电与文本字段

2 个答案: