Обработка нескольких переключателей в Quiz Angular 5

Я новичок в Angular и реализации викторины, содержащей несколько MCQ. Но у меня проблемы с выбором переключателя.

Мои вопросы также поступают из базы данных и опций.

mcq.component.html

<form (ngSubmit)="ff.form.valid && answer(ff)" #ff="ngForm">
  <div *ngFor="let question of questions">
    <p style="font-size: 25px;">{{question.title}}</p>
    <div *ngFor="let option of question.options">
        <input [(ngModel)]="option_model.selected_option_id" #selected_option_id="ngModel" type="radio" value="{{option.id}}" name="{{question.id}}">
        <!-- <input type="radio" value="{{option.id}}" name="{{question.id}}" ngModel > --> //This way it works fine but I need to use [(ngModel)] to submit the form
      {{option.title}}
    </div>
  </div>
  <input style="float: right" type="submit" value="Submit"/>
</form>

Примечание. {{question.id}} уникален для каждого вопроса. Кроме того, это хорошо работает, если я удалю атрибут [(ngModel)].

И вот что я пытаюсь сделать И вот чего я пытаюсь достичь

Проблема: когда я выбираю вариант из второго вопроса, он отменяет выбор выбранного варианта из первого вопроса. Означает, что я могу выбрать только один вариант из обоих вопросов.

Пожалуйста, помогите мне, что я делаю не так. Я застрял здесь два дня.


angular html radio-button angular5 angular4-forms
person Adnan Sheikh    schedule 09.06.2018    source источник
comment
Возможный дубликат нескольких групп переключателей в одной форме   -  person Tewdyn    schedule 09.06.2018
comment
Проверить, подходит ли этот {{question.id}} для всех вопросов? Потому что это может произойти только в том случае, если у вас есть переключатели с одинаковым атрибутом имени для разных вопросов.   -  person Nandita Sharma    schedule 09.06.2018
comment
Да, {{question.id}} для обоих вопросов разный. Это работает, когда я удаляю атрибут [(ngModel)], но тогда я не могу получить значение при отправке формы.   -  person Adnan Sheikh    schedule 09.06.2018
comment
Кажется, есть проблема с тем, как вы используете ngModel с переключателями! Поделитесь скрипкой, где я могу проверить, в чем проблема   -  person Nandita Sharma    schedule 09.06.2018
comment
Я не знаю, как это сделать :(   -  person Adnan Sheikh    schedule 09.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, Git it Sorted. Проблема заключалась в атрибуте ngModel и name.

Он отлично работает вот так

<input [(ngModel)]="options[question.id]" [checked]="options[question.id]" value="{{question.id}}-{{option.id}}" type="radio"
      name="option{{question.id}}">

И в машинописном тексте

options: any = [];
option: any = [];
person Adnan Sheikh    schedule 28.08.2018