Angular7 - Ошибка при работе с несколькими вопросами при обработке радиоуправления в формах - PullRequest
Новая
       44

Angular7 - Ошибка при работе с несколькими вопросами при обработке радиоуправления в формах

0 голосов
/ 06 ноября 2019

Я пытаюсь обработать несколько вопросов на основе mcq в реактивной угловой форме. Но проблема в том, что когда я выбираю вариант из одного вопроса, выбор из другого вопроса исчезает. Я знаю, что есть что-то, что нужно исправить с помощью идентификаторов и значений, и использую в них тоже вопрос.проблему ... но не знаю точно, как.

вот код .......
HTML 

<div class="mcq test" *ngFor="let mcq of mcqs">
<form (submit)="mcqSubmit($event)" [formGroup]="mcqForm" class=" mt-5 mb-4">
<h3 class="mt-3 p-3 font-weight-bold"><u>{{mcq.title}}</u></h3>
    <div class="questions" *ngFor="let question of mcq.questions">
        <div class="text-center justify-content-center assignment-item mb-4" >
            <h4 class="mt-3 mb-3" >{{question.problem}}</h4>

                <div *ngFor="let solution of question.solutions; let i = index" class="d-inline p-3 mr-3 ml-3">

                        <input type="radio" name="choice" id="radio{{i}}" [value]=solution.option formControlName="choice">
                        <span class="checkmark"></span>
                        <label for="radio{{i}}" class="mcq-item">  
                        {{i+1 +'.'+ solution.option | titlecase}}
                    </label>
                    <br *ngIf="(i+1)%2==0 then ifblock">
                    <ng-template #ifblock>
                            <br>
                    </ng-template>
                </div>


        </div>

    </div>
    <input type="submit" class="btn btn-primary d-block mx-auto mt-4" value="Submit" >
            </form>
</div>

и здесь угловая часть . 

this.mcqForm = this.fb.group({
    choice: ['',Validators.required]
}); ```

1 Ответ

0 голосов
/ 06 ноября 2019

Если мы упростим эту часть кода 

<form (submit)="mcqSubmit($event)" [formGroup]="mcqForm">
<div class="questions" *ngFor="let question of mcq.questions">
        <div class="text-center justify-content-center assignment-item mb-4" >
            <h4 class="mt-3 mb-3" >{{question.problem}}</h4>

                <div *ngFor="let solution of question.solutions; let i = index" class="d-inline p-3 mr-3 ml-3">

                        <input type="radio" name="choice" id="radio{{i}}" [value]=solution.option formControlName="choice">
                        <span class="checkmark"></span>
                        <label for="radio{{i}}" class="mcq-item">  
                        {{i+1 +'.'+ solution.option | titlecase}}
                    </label>
                    <br *ngIf="(i+1)%2==0 then ifblock">
                    <ng-template #ifblock>
                            <br>
                    </ng-template>
                </div>


        </div>

    </div>
</form>

Мы увидим 

<form (submit)="mcqSubmit($event)" [formGroup]="mcqForm" class=" mt-5 mb-4">    <div *ngFor="let question of mcq.questions">
     <h4>{{question.problem}}</h4>
       <div *ngFor="let solution of question.solutions; let i = index">
         <input type="radio" name="choice" id="radio{{i}}" [value]=solution.option formControlName="choice">
        <label for="radio{{i}}" class="mcq-item">  
                            {{i+1 +'.'+ solution.option | titlecase}}
        </label>
      </div>
    </div>
</form>

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

Я бы предложил вам использовать массив форм .

...