我试过很多方法:
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;
});
}
}
最佳答案
第一并入选option
你的select
元素的值为 0
.所以它基本上已经在页面加载时设置了一个值。
尝试将其更改为:<option value="" selected disabled>Select</option>
看看是否能解决您的问题。
关于html - Angular 2 - 下拉验证问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43840481/