我有一个带有选择下拉菜单和提交按钮的模板驱动表单。当我点击提交按钮时,它会显示下拉列表所需的验证消息,但它也会提交表单。 它显示表单在提交功能中有效。 如下面的代码
<form #f="ngForm" name="eventForm" id="eventForm" #eventForm="ngForm" (ngSubmit)="f.valid && saveForm(eventForm, $event)" novalidate>
<div class="form-group" >
<div class="col-md-6 col-sm-6 col-xs-12">
<label for="select_store" class=" control-label">Select Package</label>
<select multiple tabindex="10" name="package_id" [ngModelOptions]="{standalone: true}" #package_id='ngModel' tabindex="4" required id="package_id" [(ngModel)]="event.content.package_id" >
<option *ngFor="let pk of listDetails" value="{{pk.id}}">{{pk.name}}</option>
</select>
<small style="color:red" *ngIf="(eventForm._submitted && !package_id.valid && !eventForm.package_id) || (!package_id.valid && package_id.dirty) ">Content required.</small>
</div>
</div>
以下是我的javascript代码:
saveForm(form:NgForm, event: Event) {
console.log(form.valid)
event.preventDefault();
}
那么如何以正确的方式阻止表单提交和下拉验证呢?
答案 0 :(得分:1)
[ngModelOptions]="{standalone: true}"
会导致select
成为没有的元素
属于form
。
将其从select
中移除后,如果没有选择该选项,则f.valid
将转为false
,如果您参加提交表单,则不会提交表单。
参考 Plinker demo 。