Angular 2 - 下拉验证问题

Question

我尝试过很多方法:

选择字段角2的验证

如何将所需的验证应用于角度2的下拉列表

这有助于我在下拉列表中添加验证.但我有一个问题,验证运行正常但当我点击提交按钮时,如果下拉值有效或无效,则提交表格.如果下拉列表的值为"select",我不想提交表单.

这是我的HTML代码:

<form name="form" (ngSubmit)="f.form.valid && SaveSymbol()" #f="ngForm" novalidate>
       <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !DisplayGroupID.valid && !manageSymbolViewModel.DisplayGroupID }"> 
          <label for="DisplayGroupID">Display Group</label>
          <select class="form-control" name="manageSymbolViewModel.DisplayGroupID" #DisplayGroupID id="manageSymbolViewModel.DisplayGroupID" [(ngModel)]="manageSymbolViewModel.DisplayGroupID" required>
             <option value="0" selected disabled>Select</option>
             <option *ngFor="let group of result.DisplayGroups" value={{group.DisplayGroupId}}>
                  {{group.DisplayGroup}}
              </option>
          </select>
          <div *ngIf="f.submitted && !DisplayGroupID.valid && !manageSymbolViewModel.DisplayGroupID" class="help-block">Display Group is required</div>
      </div>

 <div class="form-group">
      <button [disabled]="loading" type="submit" class="btn btn primary">Save</button>
       <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
 </div>
</form>

这是组件代码:

SaveSymbol() {
       this.manageSymbolService.Save(this.manageSymbolViewModel).subscribe(data => {
                    debugger;

                },
                    error => {
                        // this.alertService.error(error);
                        // this.loading = false;
                    });
            }
    }

Answer 1

第一,选择option你的select元素有一个值0.所以基本上它已经在页面加载时设置了一个值.

尝试将其更改为:<option value="" selected disabled>Select</option>并查看是否可以解决您的问题.