Angular 2 - 下拉验证问题答案

【问题标题】：Angular 2 - Dropdown validation issueAngular 2 - 下拉验证问题
【发布时间】：2017-05-08 05:40:37
【问题描述】：

我尝试了很多方法：

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

【问题讨论】：

请显示您的提交功能并在您的组件中初始化表单
编辑了我的表单初始化问题。
请同时展示您的组件
还添加了组件代码，所以请给出一些解决方案
请查看以下解决方案

标签： html angular validation dropdown

【解决方案1】：

select 元素的第一个和选定的option 具有值0。所以它基本上已经在页面加载时设置了一个值。

尝试将其更改为：<option value="" selected disabled>Select</option>，看看是否能解决您的问题。

【讨论】：

我从值中删除了 0，但同样的问题
好的，那么我怀疑 Angular 将空字符串视为有效输入。改为value selected disabled?
<option value="" selected disabled>Select</option> 为我工作

【解决方案2】：

试试这个

<button [disabled]="loading || !DisplayGroupID.valid || !manageSymbolViewModel.DisplayGroupID" type="submit" class="btn btn primary">Save</button>

这将阻止表单在下拉列表中未选择任何内容或下拉模型无效时提交。

【讨论】：

这不是我想要的。因为如果我选择正确的值，它也不会在任何时候启用。而且我不想禁用该按钮。
@DhrutiRathod 我建议通过：angular.io/docs/ts/latest/guide/forms.html 控制角度 2 形式的正确方法

【解决方案3】：

请按照下面给出的方式更改您的表单，并在需要时通过提交功能传递您的表单状态

<form #f="ngForm" (submit)="f.valid && SaveSymbol(f.value, f.valid)" novalidate>
    <div class="form-group">
      <label>Display Group</label>
      <select ngControl="DisplayGroupID" #DisplayGroupID="ngForm" [(ngModel)]="manageSymbolViewModel.DisplayGroupID" required>
      <option value='' disabled>Select</option>
        <option *ngFor="let group of DisplayGroups" value={{group.DisplayGroupId}}>{{group.DisplayGroup}}</option>
      </select>
      <small [hidden]="DisplayGroupID.valid || (DisplayGroupID.pristine && !submitted)" class="text-danger">
           Displaygroup is required
       </small>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

并将模型初始化为

this.manageSymbolViewModel = {
      DisplayGroupID: ''
    };

请参考这个 plunkr http://plnkr.co/edit/sFTM22xbZSXBLZcv90o2

【讨论】：

每次都是Valid true，所以每次都提交页面

【解决方案4】：

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

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

示例：[disabled]="loading || DisplayGroupId.value == 0"

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

【讨论】：