Angular select default option with ng-required

Question

I have the following code:

<select id="document" ng-model="document.Id" ng-options="option.Id as option.Name for option in documents" ng-required="IsDocumentRequired">
    <option value="">Please Select Document</option>
</select>

The issue is that I don't want this default value ("Please select Document"), to satisfy the ng-required flag when it is set to true.

In summary, I want the user to be forced to choose an option other than the default.

Thanks

Just use `required`. There's no requirements to use `ng-required` here. — developer033, Jul 27 '16 at 02:29

Shintu Joseph · Accepted Answer · 2016-07-26T14:29:16.393

2

When your value is "" it does not satisfy ng-required for select, select's required field validation passes only when select option is not equal to empty, It is designed that way

See the plunker demo, https://plnkr.co/edit/tfeXhHY3h98ItX322JVS?p=preview

edited Jul 26 '16 at 14:29

answered Jul 26 '16 at 14:16

Shintu Joseph

962
7
19

score 0 · Answer 2 · answered Jul 26 '16 at 14:17

0

Do not use the

<option value="">Please Select Document</option>

So it wont display it and user should select one item from the list

answered Jul 26 '16 at 14:17

Anuradha

169
1
10

Thanks, however I need placeholder text in the select box – bak Jul 26 '16 at 14:20

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

You can test the selected value (in your case, I recommend you to put "-1" as value of "Please Select Document").

If the user do not select another value, treat it as an error.

Or see the response in How do I make a placeholder for a 'select' box?

edited May 23 '17 at 10:28

Community

1
1

answered Jul 26 '16 at 14:19

Nico

61
1
7

Angular select default option with ng-required

3 Answers3