Обработка нескольких переключателей в викторине Angular 5 - PullRequest
Новая
       28

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

0 голосов
/ 09 июня 2018

Я новичок в 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)].

И вот что я пытаюсь выполнить And here is what I'm trying to accomplish

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

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

1 Ответ

0 голосов
/ 28 августа 2018

Хорошо, Git it Sorted.Проблема была с ngModel и атрибутом имени

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

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

И в машинописи 

options: any = [];
option: any = [];
...