html - Angular 2 - 下拉验证问题

Question

我试过很多方法:

Validation for select field angular 2

How to apply required validation to dropdown in angular 2

这有助于我在下拉列表中添加验证。但我有一个问题，验证运行正常，但是当我点击提交按钮时，如果下拉值是否有效，它会提交表单。如果下拉列表的值为“选择”，我不想提交我的表单。

这是我的 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>看看是否能解决您的问题。