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

질문 양식 : 전체 양식을

대답 양식을 구축하는 양식의 컬렉션을 사용하여

,369 :

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로는 불가능합니다.

• 이 체크 박스 라디오 상자 모양을 만들기 위해 몇 가지 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) }} 

그러나, 나는 이것이 당신을위한 솔루션입니다 생각하지 않습니다. Alsatian에서 언급했듯이 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, 
     ), 
    )) 
    ... 

다음과 같은 간단한 자바 스크립트 기능을 사용할 수 있습니다. 나는 이것을 빨리 만들었으므로 이것을 설계하는 더 좋고/더 쉬운 방법이있을 수있다.

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

희망 하시겠습니까?