Php 带文本字段的Symfony表单内联收音机

在Symfony中，我有一个小树枝页面，显示带有文本字段和复选框的表单。表单包含一个问题和四个可能答案的数据。用户可以编辑数据并选择一个正确的答案。 目前，我有用户可以更改数据的所有文本字段和四个复选框。我需要单选按钮，而不是复选框（这允许用户只选择一个选项）。此外，我需要在文本字段的右侧为每个可能的答案设置复选框。在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';
    }
}

{% 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 %}

问题形式：

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';
    }
}

{% 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 %}

这是我的树枝：

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';
    }
}

{% 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 %}

{%extends'base.html.twig%}
{%block body%}
编辑记录页
{{form_start（form）}}
{{form_行（form.image）}
{{表格行（表格问题）}
{%用于表单中的答案。答案%}
{{form_row（answers.answer）}
{%endfor%}
{{form_end（form）}}
{%endblock%}

---

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

使用HTML是不可能的

没有其他选择，您必须：

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

---

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

您不能将无线电输入与文本输入混合使用，以允许用户编辑它们

使用HTML是不可能的

没有其他选择，您必须：

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

---

要将文本输入放在右侧，必须自定义表单小部件。请看一下文档：

由于您前面的问题，我理解您试图做什么。对于表单的布局，可以执行以下操作以使其看起来更好：

{{ 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函数。我做得很快，所以可能有更好/更简单的方法来设计它

// 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;
    }
    ...
}

---

希望这能有所帮助。

我理解你之前的问题，你想做什么。对于表单的布局，可以执行以下操作以使其看起来更好：

{{ 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函数。我做得很快，所以可能有更好/更简单的方法来设计它

// 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;
    }
    ...
}

---

希望有帮助。

@Alsatian是的，我需要文本字段，因为用户需要能够编辑答案。我需要单选按钮，因为用户需要选择哪个编辑的答案是正确的。@Alsatian yes我需要文本字段，因为用户需要能够编辑答案。我需要单选按钮，因为用户需要选择哪个编辑的答案是正确的。