Angular 2下拉验证不起作用答案

【问题标题】：Angular 2 dropdown validation not workingAngular 2下拉验证不起作用
【发布时间】：2017-08-09 06:35:27
【问题描述】：

我有一个带有选择下拉列表和提交按钮的模板驱动表单。当我单击提交按钮时，它会显示下拉所需的验证消息，但它也会提交表单。它表明表单在提交功能中有效。如下代码

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

}

那么如何防止表单提交并以正确的方式进行下拉验证？

【问题讨论】：

标签： javascript angular

【解决方案1】：

[ngModelOptions]="{standalone: true}" 将导致 select 成为不属于form。

从select中删除后，如果没有选择选项，则f.valid将变为false，如果您参加提交表单，则不会提交表单。

请参考 Plinker demo。

【讨论】：