Question

我尝试过很多方法：

How to apply required validation to dropdown in angular 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

如果我没看错你的问题...

您的第一个值将为0。因此，只需相应地设置[disabled]属性即可。

示例：[禁用] =“正在加载|| DisplayGroupId.value == 0”

在选择第一个选项时，将不会启用您的按钮。简单的解决方案。

Angular 2 - 下拉验证问题

1 个答案: