How to remove blank from dropdown and required validation working in AngularJS?

Question

I have a dropdown, I'm binding it with owners, but its giving extra blank option. I want to remove the blank option from it. I'm able to do but when I add these changes my required validator does show error.

<md-input-container>
        <select name="owner" ng-model="form.owner" ng-options="owner.UserName for owner in owners"
                class="input-div" style="height:30px" ng-change="ownerTypeChange()" required ng-disabled="update && view">
          <option style="display:none" value=undefined>Select an owner</option>
        </select>
        <div ng-messages="DataAccessRoleForm.owner.$error">
          <div ng-message="required">required</div>
        </div>
      </md-input-container>

If I remove the below line, then required validator works but dropdown has the blank option.

<option style="display:none" value=undefined>Select an owner</option>

on your controller make your model equal to the first element of your options array form.owner = owners[0] to pre select your first option — Fabio Antunes
– Fabio Antunes, Commented Jul 6, 2017 at 13:48

guy49987 · Accepted Answer · 2017-07-06 14:11:36Z

1

Check if your select has been touched before displaying the required message.

<div ng-if="form.owner.$touched" ng-message="required">required</div>

You can also set the default option to be selected but not selectable once they open the drop down.

<option value="" disabled selected hidden>Select an owner</option>

answered Jul 6, 2017 at 14:11

guy49987

1041 silver badge10 bronze badges

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

1 Comment

Vivek Nuna Over a year ago

Getting this error. Controller 'ngMessages', required by directive 'ngMessage', can't be found!

Collectives™ on Stack Overflow

How to remove blank from dropdown and required validation working in AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related