Invalidate select input if empty?


I just realized that all my <select> inputs using ng-options are by default empty (which I want) and valid (which I don’t).

Is there an simple way of marking the fields as invalid as long as the user hasn’t picked an option?


If you wrapped the select tags in a form you could call a function on ng-submit and pass the .$valid property of the form.

Sample: <form name="newForm" novalidate ng-submit="checkTheForm(newForm.$valid)">

BTW, add the required attribute to the select tag. Say,

<select ng-model="listing.category_id" ng-change="getSubCategories(listing.category_id)" required>
  <option ng-repeat="category in categories" value="{{}}">{{}}</option>

Thanks for your answer.

But my <select> is already part of a form and holds the required attribute. But because Angular (or Ionic) considers the field valid by default, the form can still be submitted.

In my sample, using ng-repeat on the options will add a blank option by default. How are you populating your select tag?

My code is as is:

<form name="form">
<select ng-model="user.accountFrom" name="accountFrom" ng-options="source.AccountName for source in fromAccountsCu" required></select>