角2下拉验证不起作用

我有一个模板驱动的形式与选择下拉和提交按钮。当我点击提交按钮时，它会显示下拉所需的验证消息，但它也会提交表单。它显示表单在提交功能中有效。如下代码角2下拉验证不起作用

<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(); 

}

那么怎样预防形式提交，并下拉验证以正确的方式？

来源

2017-08-09 Shiri

[ngModelOptions]="{standalone: true}"会导致select是哪个不属于form的元素。

将其从select中删除后，如果没有选择选项，则f.valid将变为false，如果您出席提交表格，表格将不会被提交。

参考Plinker demo。

来源

2017-08-09 06:59:39 Pengyy

角2下拉验证不起作用

回答

相关问题