Angular 即使必填字段为空，在表单内部单击也会以角度方式提交

表单中有下拉列表，当它的值改变时，我检查它是否下拉。如果是下拉列表，则用户必须输入下拉列表的值。在更改下拉列表时，我调用“ChangeSortOrder”函数，但表单也随之提交。所以我没有点击提交按钮，而是点击提交按钮。但现在的问题是，即使值为空，它也没有检查必填字段和提交

<form role="form" class="form form-horizontal" #Editform="ngForm" ngNativeValidate>
    <div ngbDropdown class="col-md-6" style="float:left">
        <button class="btn btn-outline-allow" id="dropdownBasic1" ngbDropdownToggle>{{selectedQuestionType}}</button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
            <button class="dropdown-item" (click)="ChangeSortOrder('Text')">Text</button>

            <button class="dropdown-item" (click)="ChangeSortOrder('DropDown')">DropDown</button>

        </div>

        <ul class="list-group ">
            <li class="list-group-item" *ngIf="selectedQuestionType == 'DropDown'">
                You have selected a Drop Down question. This means diner will select from 5 options in response to this question. This score can contribute to your overall score and section.
            </li>

            <li class="list-group-item" *ngIf="selectedQuestionType == 'Text'">
                You have selected a text question. This means the diner will enter a text in response to this question. This score can contribute to your overall score and section.
            </li>

        </ul>

        <!-- Question -->
        <div class="form-group mt-2">
            <div class="position-relative has-icon-left">
                <textarea class="form-control" name="question" value={{editQuestion.question}} [(ngModel)]="question" required> </textarea>
                <div class="form-control-position">
                    <i class="fa fa-question allow"></i>
                </div>
            </div>
        </div>
        <!-- DropDown -->

        <div class="position-relative has-icon-left" *ngIf="selectedQuestionType == 'DropDown'">
            <input type="text" class="form-control" name="DropDown1" [(ngModel)]="DropDown1" placeholder="Give Label for drop down" required/>
            <div class="form-control-position">
                <i class="fa fa-angle-double-right success"></i>
            </div>
        </div>


        <div class="position-relative has-icon-left" *ngIf="selectedQuestionType == 'DropDown'">
            <input type="text" class="form-control" name="DropDown2" [(ngModel)]="DropDown2" placeholder="Give Label for drop down" required/>
            <div class="form-control-position">
                <i class="fa fa-angle-double-right" style="color:#7CB342"></i>
            </div>
        </div>

    </div>
    <div class="pull-right col-md-6">

        <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="modelRadio">

            <label ngbButtonLabel class="btn-raised btn-outline-allow">
                <input ngbButton type="radio" [value]="2"> Staff
            </label>

            <label ngbButtonLabel class="btn-raised btn-outline-allow">
                <input ngbButton type="radio" [value]="3"> Marketing
            </label>
        </div>
        <ul class="list-group">

            <li class="list-group-item" *ngIf="modelRadio == 2">
                You have selected a Staff question. We will provide you with insights on where are you performing well and where there is
                room for improvement.
            </li>
            <li class="list-group-item" *ngIf="modelRadio == 3">
                You have selected a Marketing question. We will provide you with insights on where are you performing well and where there is room for improvement.
            </li>
        </ul>

    </div>

    <button type="submit" (click)="onSubmit()" class="btn btn-raised btn-danger pull-right mt-2">Save</button>
</form>

{{selectedQuestionType}
正文
下拉列表


您选择了一个下拉式问题。这意味着用餐者将从5个选项中选择回答此问题。这个分数可以对你的总分数和部分做出贡献。


您选择了一个文本问题。这意味着用餐者将输入一条文本来回答此问题。这个分数可以对你的总分数和部分做出贡献。


工作人员
营销


您选择了一个员工问题。我们将为您提供关于您在哪些方面表现良好以及存在哪些问题的见解
还有改进的余地。


您选择了一个营销问题。我们将为您提供见解，了解您在哪些方面表现出色，哪些方面还有改进的余地。


拯救

您是否尝试将按钮类型从“提交”更改为“按钮”

拯救

有几种方法可以防止表单提交：

将按钮类型设置为

type=“button”

在按钮上调用

$event.preventDefault（）

---

<代码>下拉< /代码>

请考虑如果可能的话创建一个StabrBILITZ。