AngularJS Validation on <select> with a prompt option

user_613605 0
Viewed 52714

I have the following code for a select drop down input that is styled in Bootstrap.

<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
    <option value="">-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>

Before the user is able to submit this form, he or she must select a business process.

So I have put the required directive on the select statement, however because the first option tag has -- Select Business Process -- that still counts as a selected option, and thus the required flag is met, and therefore the form validates even though no actual Business Process is selected.

How can I overcome this issue?

Thank You.

angularjs validation select
9 Answers

Use the following code snippet

<select class="form-control" name="businessprocess" ng-model="businessprocess">
    <option value="A" disabled selected hidden>-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
</select>
user_113736390

This works for me. Form is invalid until user selects any other value than "Choose..."

<select name="country" id="country" class="form-control" formControlName="country" required>
    <option selected value="">Choose...</option>
    <option *ngFor="let country of countries">{{country.country}}</option>
</select>
user_46630540
Related