Question

我的Angular 2应用程序中有一个表单，其中包含一个单一的单选按钮问题（有3个答案选项）。它在Chrome中效果很好但是当我选择Firefox中的单选按钮的答案时，然后按下提交按钮，浏览器上的弹出窗口back按钮说“请选择其中一个选项”并且不会让我提交表格。

为什么会发生这种情况，我该如何解决？

一些HTML代码：

<form (ngSubmit)="onNext(f)" #f="ngForm"> <!-- section form -->

    <div class="question-div" *ngFor="let question of section?.questions">
        <h3 class="question-text">{{ question?.name }}</h3>

        <!-- for multichoice questions -->
        <div class="multi-choice-question-div radio-btn-div question_div" 
            *ngIf="question?.type === 'multi-choice' && !question?.isYesOrNo">
            <div *ngFor="let answer of question?.answerDetails">
                <input
                    type="radio" 
                    class="display-none" 
                    id="{{ answer?.answerId }}"
                    [(ngModel)]="ngModelObj['question_' + question.questionId]"
                    (ngModelChange)="onAnswerChanged()"
                    name="answerForQustion{{ question?.questionId }}"
                    [value]="answer"
                    required>
                <label class="col-md-12 col-sm-12 multi-choice-label" for="{{ answer?.answerId }}">
                    <p class="q-text">{{ answer?.value }}</p>
                </label>
            </div>
        </div>
        <!-- end multichoice question -->

        ....

    <button
        type="button"
        class="btn btn-next"
        (click)="onNext(f)"
        *ngIf="currentSectionIndex === sectionsArr.length - 1"
        [disabled]="!checkFormValidation(f)">
            NEXT
    </button>

</form>

Answer 1

我转载了你的问题。我认为Angular 2验证与本机浏览器验证之间存在冲突，但我没有找到任何关于此的问题（只是关于ng-pristine）。

我建议您使用表单的novalidate标记禁用本机浏览器验证，这样您就可以使用ngForm.valid（f.valid在您的情况下使用Angular 2验证）

因此，您的表单将如下所示：

<form novalidate (ngSubmit)="onNext(f)" #f="ngForm"> <!-- section form -->

    etc.

这是一个带有简化示例的Plunker，可以在我的Firefox 43中使用：https://plnkr.co/edit/cbIHbPX5knHPg1WvL0EH?p=preview

Angular 2验证和复选框'required'属性在Firefox上不起作用

1 个答案: