Ciwan Ciwan - 1 year ago 67
AngularJS Question

AngularJS Validation on <select> with a prompt option

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>

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

So I have put the
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.

Answer Source

This approach could/should solve your issue: 1) declare the options inside of your scope:

$scope.processes = [
    { code: "C", name: "Process C" },
    { code: "Q", name: "Process Q" }

And 2) use this declaration:

<select class="form-control" name="businessprocess" ng-model="businessprocess" required
    ng-options="c.code as for c in processes" >
    <option value="">-- Select Business Process --</option>

The trick here is in fact, that during the angular cycles, will firstly fix the issue that the the current value is not among the processes options. So, the default would be set to:

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

and required will be working as expected (more details)