angular - 使用模板驱动的表单验证动态单选按钮

Question

我有一个带有这样代码的动态单选按钮

<form #quizRes="ngForm" (submit)="submit()">
    <nb-stepper #stepper disableStepNavigation>
        <nb-step *ngFor="let question of quizDetail?.questions;let i=index">
            <p style="font-size: 20px;text-align: center;"><b>{{question.name}}</b></p>
            <nb-radio-group *ngFor="let option of question.options;" required>
                <nb-radio class="answerRadio" style="margin: auto;width: 500px;max-width: 100%;"
                    status="control" id="{{option.order}}" name="jawaban" ngDefaultControl
                    [ngModelOptions]="{standalone: true}" [(ngModel)]="question.options.code"
                    value="{{option.code}}" name="{{question.order}}" #jawaban="ngModel"
                    [status]="jawaban.invalid ? 'danger' : 'basic'" > 
                    {{option.name}}
                </nb-radio>
            </nb-radio-group>
            <button style="margin-top: 30px;margin-right:10px;" *ngIf="i > 0" nbButton
                nbStepperPrevious>Back</button>
            <button style="margin-top: 30px;" *ngIf="i < quizDetail?.questions.length-1" nbButton
                nbStepperNext>Next</button>
            <button style="margin-top: 30px;" *ngIf="i == quizDetail?.questions.length-1" nbButton
                nbStepperNext  type="submit">Submit</button>
        </nb-step>
        <nb-step hidden="true" *ngIf="quizLoading == false">
            <div class="step-container" style="text-align: center;">
                <h3>Quiz Selesai, silahkan lanjut ke materi selanjutnya!</h3>
            </div>
        </nb-step>
    </nb-stepper>
</form>

我想通过禁用下一个按钮来防止用户跳过问题，我该如何实现？

标签： angularangular-reactive-formsangular-forms