Select box validation using ngModel in Angular2

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>

Here if value of select box is <option value=null >--Select--</option> then need to disable the search and give a tool tip(default form authentication 'Pleas fill the fields') by highlighting that field. THe above code is not working as expected.

Wasif Khan · Accepted Answer · 2017-07-24 10:27:24Z

1

For Button Disabling Set value to to empty when --Select--

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

and in your button:

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

answered Jul 24, 2017 at 10:27

Wasif Khan

9547 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Select box validation using ngModel in Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related