帶有文本字段的Symfony窗​​體內嵌收音機

Question

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

Answer 1

不能混合使用文本輸入的無線輸入，讓用戶對其進行編輯。

這是HTML不可能的。

沒有其他選擇，你必須：

• 重新創建使用JavaScript在客戶端
• 無線電行爲寫一些CSS，使您的複選框看起來像單選按鈕。
• 附加一個表單約束，它在提交後僅選中一個複選框。

要將文本輸入放在右側，您必須自定義窗體小部件。看看文檔：http://symfony.com/doc/current/cookbook/form/form_customization.html

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來檢查單選按鈕的「onchange」事件。你正在創建一個表單類，在我看來，它並不總是適用於每個設計。您可以嘗試使用「createFormBuilder」，並根據需要進行完全自定義。

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

希望有所幫助。