Как отобразить вопросы викторины с их параметрами и сохранить выбранную опцию в Angular 5?

Question

Я довольно новичок в Angular, поэтому я нахожу эту часть запутанной. Я пытаюсь отобразить список вопросов, полученных из базы данных (ASP.NET Core 2.0 в качестве веб-API) и показать их параметры для каждого вопроса. Вопросы и варианты находятся в отношении «один ко многим» (проектирование базы данных).

Однако я не знаю, как отобразить вопросы и соответствующие параметры на одной странице и получить идентификатор вопроса и выбранные параметры. Я пытаюсь использовать реактивные формы для этого метода. Мой код ниже.

checklistform.component.html

    <form [formGroup]="CheckListForm">
         <div class="form-group">
    <label class="center-block"> Name:
   <input class="form-control" formControlName = "name">
  </label>
     </div>


    <div class="form-group">
      <label class="center-block"> Employement Type:
  <input class="form-control" formControlName = "EmploymentType">
 </label>
  </div>

  <div class="form-group">
    <label class="center-block"> HRMS:
    <input class="form-control" formControlName = "HRMS">
 </label>
   </div>


  <div class="form-group">
   <label class="center-block"> CompanyName:
   <input class="form-control" formControlName = "CompanyName">
  </label>
      </div>


   <div formArrayName="questions" class="well well-lg">
    <div *ngFor="let question of questions.controls; let i=index" 
     [formGroupName]="i" >
            <div class="form-group">

                    //template for questions and options must be listed 
                       here.

Это мой файл .ts. checklistform.component.ts

       import { ChecklistService } from './../service/checklist.service';
       import { Component, OnInit,OnChanges } from '@angular/core';
        import { FormGroup,
                 FormBuilder,
                  FormArray,
                 FormControl,
                  Validators, } from '@angular/forms';


              @Component({
                  selector: 'app-check-list-form',
                   templateUrl: './check-list-form.component.html',
                   styleUrls: ['./check-list-form.component.css']
                                                                  })
           export class CheckListFormComponent implements OnInit, OnChanges{


                    CheckListForm: FormGroup;


              Questions: any = [];

              constructor(private fb: FormBuilder,
                      private checklistservice: ChecklistService) { 
                   this.CreateForm();

                                    }

              ngOnInit() { 

     this.checklistservice.getQuestions(1).subscribe(res => this.Questions = 
             res); }

              ngOnChanges() {

                            }

            CreateForm() {

             this.CheckListForm = this.fb.group({

                name: ['', Validators.required],
              EmploymentType: ['', Validators.required],
              HRMS: ['', Validators.required],
             CompanyName:'',

            questions: this.fb.array([

             this.fb.group({

           ques: ['', Validators.required],
             choices: ['', Validators.required]
          })
           ]) 

          })
           }

             get questions(): FormArray {
             return this.CheckListForm.get('questions') as FormArray;
               }
              }

Пожалуйста, помогите. Я попытался выполнить поиск в Интернете, но не могу найти решение.

Answer 1

Вы можете использовать элемент управления ListBox из компонентов пользовательского интерфейса PrimeNG для отображения вопросов. Ниже приведена ссылка элемента управления PrimeNG ListBox

https://www.primefaces.org/primeng/#/listbox

Вы можете обратиться к блогу ниже, чтобы узнать больше об установке пакета PrimeNG и о том, как использовать его в приложении Angular.

http://hive.rinoy.in/how-to-add-primeng-ui-components-in-asp-net-core-2-and-angular-web-application/

Answer 2

Ни один из предоставленных ответов не является правильным.

Для решения этой проблемы необходимо использовать следующее:

1. FormGroup

2. Formarray.

Вам нужно будет выполнить итерацию модели через FormArray, а затем отобразить соответствующие параметры для каждого вопроса.

Вам нужно будет использовать реактивные формы для этого подхода, который я предложил.

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

Answer 3

Если ваш ответ как ниже, то лучше обработать

 Questions: any[] = [
       {
          'Question': 'question-1',
          'Options': [
            {
              "id": 1
              "option": "A"
            },
            {
               "id": 2
              "option": "B"
            },
          ]
        },
         {
          'Question': 'question-2',
          'Options': [
            {
               "id": 1
              "option": "A"
            },
            {
                "id": 2
              "option": "B"
            },
          ]
        }
    ]

HTML

 <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
    <!-- we will place our fields here -->

    <!-- name -->
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name">
        <!--display error message if name is not valid-->
        <small *ngIf="!myForm.controls.name.valid" class="text-danger">
            Name is required (minimum 5 characters).
        </small>
    </div>

    <!-- list of Question -->
    <div formArrayName="questions">
        <div *ngFor="let question of Questions; let i=index">


            <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
            <div [formGroupName]="i">
                <!--street-->
                <div *ngFor="let opt of question.Options; let j=index">
                    <label>Option : </label>
                    <input type="checkbox" formControlName="Option1" value="1">
                    <!--display error message if street is not valid-->

                </div>
            <div>
        </div>
    </div>
    <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

Попробуйте это