单击内部表单会在 angular 中提交,即使必填字段为空
On click inside form gets submitted in angular even if required fields are blank
表单的值变化时有下拉,我检查它是否下拉。如果它下拉,则用户必须输入下拉值。在更改下拉菜单时,我调用了 "ChangeSortOrder" 函数,但同时提交了表单。因此,我过去常常点击提交按钮而不是 NgSubmit。但现在的问题是它不检查必填字段并提交,即使值为空也是如此。
<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>
您是否尝试过将按钮类型从 "submit" 更改为 "button"?
<button type="button"
(click)="onSubmit()"
class="btn btn-raised btn-danger pull-right mt-2">
Save
</button>
有几种方法可以防止表单被提交:
设置按钮类型为type="button"
按按钮调用$event.preventDefault();
<button class="dropdown-item" (click)="ChangeSortOrder('DropDown'); $event.preventDefault()">DropDown</button>
表单的值变化时有下拉,我检查它是否下拉。如果它下拉,则用户必须输入下拉值。在更改下拉菜单时,我调用了 "ChangeSortOrder" 函数,但同时提交了表单。因此,我过去常常点击提交按钮而不是 NgSubmit。但现在的问题是它不检查必填字段并提交,即使值为空也是如此。
<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>
您是否尝试过将按钮类型从 "submit" 更改为 "button"?
<button type="button"
(click)="onSubmit()"
class="btn btn-raised btn-danger pull-right mt-2">
Save
</button>
有几种方法可以防止表单被提交:
设置按钮类型为
type="button"
按按钮调用
$event.preventDefault();
<button class="dropdown-item" (click)="ChangeSortOrder('DropDown'); $event.preventDefault()">DropDown</button>