Select 在 Angular2 中使用 ngModel 进行框验证

Question

<div class="col-md-3 col-sm-4">
     <div class="ui-input-group">
          <select #categoryVal="ngModel" class="form-control" name="staffCategory" [(ngModel)]="staffCategory">
               <option value=null >--Select--</option>
               <option *ngFor="let cat of applicationCategories" value="{{cat.categoryCode}}">{{cat.categoryName}}</option>
           </select>
           <span class="input-bar"></span>
           <label class="control-label">Category<span style="color:#f44336;">*</span></label>
     </div>
     <button class="btn btn-primary btn-sm  ripple" [disabled]="categoryVal.errors"  name="searchPerson" (click)="searchNewPerson($event)">Search</button>
</div>

这里如果 select 框的值为 <option value=null >--Select--</option> 则需要禁用搜索并通过突出显示该字段给出工具提示（默认表单身份验证 'Pleas fill the fields'）。上面的代码没有按预期工作。

Answer 1

对于按钮禁用当 --Select--

时将值设置为空

<option value="">--Select--</option>

在你的按钮中：

<button class="btn btn-primary btn-sm  ripple" [disabled]="categoryVal==''"  name="searchPerson" (click)="searchNewPerson($event)">Search</button>

Select 在 Angular2 中使用 ngModel 进行框验证

Select box validation using ngModel in Angular2

angular2-template